zhaowei.huangandCursor
745ab03a84
- 主区背景下沉至约 92% 明度，卡片/KPI 改用更明显的紫色投影并上浮 - 修复 Dashboard 在 route-page flex 下被压扁导致快捷入口被裁切 - 车辆监控面板紧凑化 Co-authored-by: Cursor <cursoragent@cursor.com>
1660 lines
66 KiB
CSS
1660 lines
66 KiB
CSS
/* 迷毂 平台主题：可切换色板 (v1.9)
|
||
* 默认主题：industrial-purple (星云紫 · 紫主色 + 蓝紫辅助 · 霓虹磨砂玻璃)
|
||
* 所有品牌相关颜色全部走 --mg-* CSS 变量，可由 src/styles/themes.ts 在运行时切换
|
||
*
|
||
* 设计系统规范见 design-system/MASTER.md (由 ui-ux-pro-max skill 推导)
|
||
*/
|
||
|
||
/* JetBrains Mono · 用于 KPI / 坐标 / ID 等数据数字（tabular-nums）*/
|
||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
|
||
|
||
:root {
|
||
/* ── 状态色（与品牌色解耦，跨主题保持语义） ── */
|
||
--mg-status-success: #22c55e;
|
||
--mg-status-success-rgb: 34, 197, 94;
|
||
--mg-status-warning: #f59e0b;
|
||
--mg-status-warning-rgb: 245, 158, 11;
|
||
--mg-status-danger: #ef4444;
|
||
--mg-status-danger-rgb: 239, 68, 68;
|
||
--mg-status-info: #3b82f6;
|
||
--mg-status-info-rgb: 59, 130, 246;
|
||
--mg-status-idle: #94a3b8;
|
||
--mg-status-idle-rgb: 148, 163, 184;
|
||
|
||
/* ── 数据可视化色板（ECharts / Progress 等） ── */
|
||
--mg-data-c1: #3b82f6;
|
||
--mg-data-c2: #22c55e;
|
||
--mg-data-c3: #a855f7;
|
||
--mg-data-c4: #f59e0b;
|
||
--mg-data-c5: #ef4444;
|
||
--mg-data-c6: #06b6d4;
|
||
--mg-data-c7: #ec4899;
|
||
--mg-data-c8: #84cc16;
|
||
|
||
/* ── 字体栈 ── */
|
||
--mg-font-sans: 'PingFang SC', 'Microsoft YaHei', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
--mg-font-mono: 'JetBrains Mono', 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
|
||
|
||
/* ── 品牌主色（默认 = 星云紫，可被 themes.ts 注入覆盖） ── */
|
||
--mg-primary: #7c3aed;
|
||
--mg-primary-rgb: 124, 58, 237;
|
||
--mg-primary-hover: #8b5cf6;
|
||
--mg-primary-hover-rgb: 139, 92, 246;
|
||
--mg-primary-active: #5b21b6;
|
||
--mg-accent: #c4b5fd;
|
||
--mg-accent-rgb: 196, 181, 253;
|
||
|
||
--mg-primary-light-3: #9d6cf2;
|
||
--mg-primary-light-5: #b594f7;
|
||
--mg-primary-light-7: #6f4eab;
|
||
--mg-primary-light-8: #4c357a;
|
||
--mg-primary-light-9: #2d1f55;
|
||
--mg-primary-dark-2: #4c1d95;
|
||
|
||
/* ── 背景：深紫黑底 ── */
|
||
--mg-bg-app-1: #0e0a24;
|
||
--mg-bg-app-2: #1f1147;
|
||
--mg-bg-app-3: #06031a;
|
||
--mg-bg-app-deep-rgb: 6, 3, 26;
|
||
|
||
--mg-bg-aside-1: #0c0820;
|
||
--mg-bg-aside-2: #03020e;
|
||
--mg-bg-aside-rgb: 10, 6, 30;
|
||
|
||
--mg-bg-card-rgb: 38, 24, 78;
|
||
--mg-bg-card-hi-rgb: 58, 38, 110;
|
||
--mg-bg-card-darker-rgb: 20, 12, 48;
|
||
--mg-shadow-rgb: 8, 2, 24;
|
||
|
||
--mg-text-tint-rgb: 242, 232, 255;
|
||
--mg-text-hi-rgb: 220, 200, 252;
|
||
|
||
--mg-orb-a-opacity: 0.55;
|
||
--mg-orb-b-opacity: 0.50;
|
||
--mg-orb-c-opacity: 0.40;
|
||
|
||
/* ── 玻璃设计令牌（霓虹磨砂玻璃体系，主色感知更明显） ── */
|
||
--mg-glass-bg: rgba(255, 255, 255, 0.06);
|
||
--mg-glass-bg-hover: rgba(255, 255, 255, 0.10);
|
||
--mg-glass-bg-active: rgba(255, 255, 255, 0.14);
|
||
--mg-glass-border: rgba(255, 255, 255, 0.18);
|
||
--mg-glass-border-hi: rgba(255, 255, 255, 0.28);
|
||
--mg-glass-shadow:
|
||
0 10px 28px rgba(var(--mg-shadow-rgb), 0.55),
|
||
0 0 22px rgba(var(--mg-primary-rgb), 0.18),
|
||
0 0 0 1px rgba(255, 255, 255, 0.06) inset,
|
||
0 1px 0 rgba(255, 255, 255, 0.12) inset;
|
||
--mg-glass-shadow-hi:
|
||
0 18px 44px rgba(var(--mg-shadow-rgb), 0.70),
|
||
0 0 36px rgba(var(--mg-primary-hover-rgb), 0.30),
|
||
0 0 0 1px rgba(var(--mg-accent-rgb), 0.25) inset,
|
||
0 1px 0 rgba(255, 255, 255, 0.22) inset;
|
||
--mg-glass-blur: blur(20px) saturate(160%);
|
||
--mg-glass-blur-hi: blur(30px) saturate(180%);
|
||
|
||
--mg-radius-sm: 8px;
|
||
--mg-radius: 14px;
|
||
--mg-radius-lg: 20px;
|
||
--mg-radius-xl: 24px;
|
||
|
||
/* ── 文字 ── */
|
||
--mg-text-light: #ffffff;
|
||
--mg-text-muted: rgba(255, 255, 255, 0.7);
|
||
--mg-text-dim: rgba(255, 255, 255, 0.5);
|
||
--mg-text-faint: rgba(255, 255, 255, 0.35);
|
||
--mg-divider: rgba(255, 255, 255, 0.08);
|
||
|
||
/* ── Element Plus 主色覆盖 ── */
|
||
--el-color-primary: var(--mg-primary);
|
||
--el-color-primary-rgb: var(--mg-primary-rgb);
|
||
--el-color-primary-light-3: var(--mg-primary-light-3);
|
||
--el-color-primary-light-5: var(--mg-primary-light-5);
|
||
--el-color-primary-light-7: var(--mg-primary-light-7);
|
||
--el-color-primary-light-8: var(--mg-primary-light-8);
|
||
--el-color-primary-light-9: var(--mg-primary-light-9);
|
||
--el-color-primary-dark-2: var(--mg-primary-dark-2);
|
||
|
||
--mg-transition: all .25s cubic-bezier(.25, .8, .25, 1);
|
||
|
||
/* ── 通用「内嵌表面」veil 令牌 ──
|
||
* 面板里的嵌套行 / 子卡 / 统计项常用 rgba(255,255,255,.0x) 当作浅色微透表面，
|
||
* 在深色主题里是「白色微透」效果；但 fame-lavender 浅紫主题切到白底后这些白veil
|
||
* 直接消失（白叠白）。把它们抽成令牌：深色主题保持白微透，fame-lavender 翻成紫微透，
|
||
* 这样所有引用处自动双主题可见，且不影响 6 套深色主题观感。 */
|
||
--mg-veil-1: rgba(255, 255, 255, 0.05);
|
||
--mg-veil-2: rgba(255, 255, 255, 0.08);
|
||
--mg-veil-3: rgba(255, 255, 255, 0.12);
|
||
--mg-veil-border: rgba(255, 255, 255, 0.12);
|
||
--mg-veil-border-hi: rgba(255, 255, 255, 0.20);
|
||
|
||
/* ── 面板「动作按钮」令牌 ──
|
||
* 深色主题：半透明紫玻璃底 + 白字；fame-lavender：实色紫底 + 白字（对比足够）。 */
|
||
--mg-action-bg: rgba(76, 29, 149, 0.45);
|
||
--mg-action-bg-hover: rgba(109, 40, 217, 0.75);
|
||
--mg-action-border: rgba(167, 139, 250, 0.55);
|
||
--mg-action-border-hi: rgba(196, 181, 253, 0.9);
|
||
}
|
||
|
||
html {
|
||
--el-color-primary: var(--mg-primary) !important;
|
||
--el-color-primary-rgb: var(--mg-primary-rgb) !important;
|
||
--el-color-primary-light-3: var(--mg-primary-light-3) !important;
|
||
--el-color-primary-light-5: var(--mg-primary-light-5) !important;
|
||
--el-color-primary-light-7: var(--mg-primary-light-7) !important;
|
||
--el-color-primary-light-8: var(--mg-primary-light-8) !important;
|
||
--el-color-primary-light-9: var(--mg-primary-light-9) !important;
|
||
--el-color-primary-dark-2: var(--mg-primary-dark-2) !important;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: var(--mg-font-sans);
|
||
color: var(--mg-text-light);
|
||
background:
|
||
radial-gradient(ellipse at 20% 0%, rgba(var(--mg-primary-hover-rgb), 0.45) 0%, transparent 55%),
|
||
radial-gradient(ellipse at 80% 100%, rgba(var(--mg-bg-card-rgb), 0.65) 0%, transparent 55%),
|
||
linear-gradient(135deg, var(--mg-bg-app-1) 0%, var(--mg-bg-app-2) 50%, var(--mg-bg-app-3) 100%);
|
||
background-attachment: fixed;
|
||
min-height: 100vh;
|
||
transition: background-color .35s ease;
|
||
}
|
||
|
||
#app { min-height: 100vh; position: relative; }
|
||
|
||
/* ── 全局科幻网格层 (默认开启,主题可单独关闭) ── */
|
||
#app::before {
|
||
content: '';
|
||
position: fixed;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
background-image:
|
||
linear-gradient(rgba(var(--mg-accent-rgb), 0.05) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(var(--mg-accent-rgb), 0.05) 1px, transparent 1px);
|
||
background-size: 48px 48px, 48px 48px;
|
||
mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, transparent 75%);
|
||
-webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, transparent 75%);
|
||
opacity: 0.55;
|
||
}
|
||
/* ── 极淡扫描线（增加科技感） ── */
|
||
#app::after {
|
||
content: '';
|
||
position: fixed;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
background-image: repeating-linear-gradient(
|
||
0deg,
|
||
rgba(255, 255, 255, 0.018) 0,
|
||
rgba(255, 255, 255, 0.018) 1px,
|
||
transparent 1px,
|
||
transparent 3px
|
||
);
|
||
mix-blend-mode: overlay;
|
||
}
|
||
|
||
/* 让所有 router 内容在背景层之上 */
|
||
.app-shell, .login-page { position: relative; z-index: 1; }
|
||
|
||
/* ── 玻璃卡片复用类 ── */
|
||
.mg-glass {
|
||
background: var(--mg-glass-bg);
|
||
border: 1px solid var(--mg-glass-border);
|
||
border-radius: var(--mg-radius);
|
||
backdrop-filter: var(--mg-glass-blur);
|
||
-webkit-backdrop-filter: var(--mg-glass-blur);
|
||
box-shadow: var(--mg-glass-shadow);
|
||
transition: var(--mg-transition);
|
||
}
|
||
.mg-glass:hover {
|
||
background: var(--mg-glass-bg-hover);
|
||
border-color: var(--mg-glass-border-hi);
|
||
box-shadow: var(--mg-glass-shadow-hi);
|
||
transform: translateY(-2px);
|
||
}
|
||
.mg-glass-lg {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||
border-radius: var(--mg-radius-lg);
|
||
backdrop-filter: var(--mg-glass-blur-hi);
|
||
-webkit-backdrop-filter: var(--mg-glass-blur-hi);
|
||
box-shadow:
|
||
0 30px 80px rgba(var(--mg-shadow-rgb), 0.55),
|
||
0 0 0 1px rgba(255, 255, 255, 0.25) inset,
|
||
0 1px 0 rgba(255, 255, 255, 0.4) inset;
|
||
}
|
||
|
||
/* ── 主按钮统一 ── */
|
||
.el-button--primary {
|
||
--el-button-bg-color: var(--mg-primary);
|
||
--el-button-border-color: var(--mg-primary);
|
||
--el-button-hover-bg-color: var(--mg-primary-hover);
|
||
--el-button-hover-border-color: var(--mg-primary-hover);
|
||
--el-button-active-bg-color: var(--mg-primary-active);
|
||
--el-button-active-border-color: var(--mg-primary-active);
|
||
}
|
||
|
||
/* ── 滚动条 ── */
|
||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||
::-webkit-scrollbar-thumb {
|
||
background: rgba(var(--mg-accent-rgb), 0.4);
|
||
border-radius: 3px;
|
||
}
|
||
::-webkit-scrollbar-thumb:hover { background: rgba(var(--mg-accent-rgb), 0.7); }
|
||
::-webkit-scrollbar-track { background: transparent; }
|
||
|
||
::selection { background: rgba(var(--mg-accent-rgb), 0.4); color: #fff; }
|
||
|
||
a { color: var(--mg-accent); }
|
||
a:hover { color: rgba(var(--mg-accent-rgb), 0.85); }
|
||
|
||
/* ── 玻璃语境下 Element Plus 全局填充/背景变量暗化（会话 N+2 UI 修复）──
|
||
* 问题：默认 industrial-purple (星云紫) 主题下，`.mg-content` 把 `--el-text-color-primary`
|
||
* 改成白色 (line ~290) 让卡片/Table 等深底组件的字可读，但 element-plus 内部仍然有
|
||
* `var(--el-fill-color-light)` (#f5f7fa)、`var(--el-bg-color)` (#fff) 等浅色填充值。
|
||
* 任何组件（如 FieldMemberEditor `.fme-desc`、ProjectPropertiesView .pp-desc）用
|
||
* `background: var(--el-fill-color-light)` + `color: var(--el-text-color-primary)` 就撞出
|
||
* 「浅灰底 + 白字」不可读。
|
||
*
|
||
* 解法：把 element-plus 填充/背景变量改成基于 `--mg-bg-card-rgb` 的半透明：
|
||
* - industrial-purple 时 --mg-bg-card-rgb = "38, 24, 78" → 暗紫 35-55% 透明，深底+白字 OK；
|
||
* - fame-lavender 时 --mg-bg-card-rgb = "255, 255, 255" → 白色 35-55% 透明，配 fame-lavender
|
||
* 的 #2d1b69 深字（line ~1069 已配）也清楚。
|
||
* 边框、占位符同步走「主色感知」的灰阶。 */
|
||
.mg-content {
|
||
--el-fill-color-blank: transparent;
|
||
--el-fill-color-light: rgba(var(--mg-bg-card-rgb), 0.45);
|
||
--el-fill-color-lighter: rgba(var(--mg-bg-card-rgb), 0.35);
|
||
--el-fill-color: rgba(var(--mg-bg-card-rgb), 0.55);
|
||
--el-fill-color-dark: rgba(var(--mg-bg-card-rgb), 0.65);
|
||
--el-fill-color-darker: rgba(var(--mg-bg-card-rgb), 0.75);
|
||
--el-bg-color: rgba(var(--mg-bg-card-rgb), 0.55);
|
||
--el-bg-color-page: transparent;
|
||
--el-bg-color-overlay: rgba(var(--mg-bg-card-rgb), 0.92);
|
||
--el-border-color: rgba(255, 255, 255, 0.14);
|
||
--el-border-color-light: rgba(255, 255, 255, 0.10);
|
||
--el-border-color-lighter: rgba(255, 255, 255, 0.08);
|
||
--el-border-color-extra-light: rgba(255, 255, 255, 0.06);
|
||
--el-text-color-secondary: rgba(var(--mg-text-hi-rgb), 0.7);
|
||
--el-text-color-placeholder: rgba(255, 255, 255, 0.40);
|
||
--el-text-color-disabled: rgba(255, 255, 255, 0.30);
|
||
}
|
||
|
||
/* FieldMemberEditor / ProjectPropertiesView 的「描述长条」专项修复 ─
|
||
* 组件 scoped css 写 `background: var(--el-fill-color-light)` + `color: var(--el-text-color-primary)`，
|
||
* 即便上面 `.mg-content` 已经把变量改基于 --mg-bg-card-rgb，组件本身仍可能因 Vue scoped 选择器
|
||
* 优先级把变量「冻结」住。这里直接给 `.fme-desc` 在 .mg-content 上下文里写绝对色，杜绝歧义。 */
|
||
.mg-content .fme-desc {
|
||
background: rgba(var(--mg-bg-card-rgb), 0.55) !important;
|
||
color: var(--mg-text-light) !important;
|
||
border-left-color: var(--mg-accent) !important;
|
||
}
|
||
.mg-content .fme-path { color: var(--mg-text-light) !important; }
|
||
.mg-content .fme-path-empty { color: var(--mg-text-muted) !important; }
|
||
|
||
/* ─── 「admin 风格 tabs」共享样式（会话 N+2 用户反馈） ────────────────────────────
|
||
* 把「场景管理」(SceneManagerView) 里的 type="border-card" + 紫色高亮 tabs 抽成
|
||
* 全局 .admin-tabs 类，让项目属性 / 车辆管理 / 后续配置中心等多 tab 页面统一外观。
|
||
*
|
||
* 用法：<el-tabs class="admin-tabs" type="border-card"> ... </el-tabs>
|
||
* - 容器：透明背景 + 紫色微辉边框；
|
||
* - tab 头：透明 + 浅紫边线；
|
||
* - tab 项：未激活淡紫白；hover 加亮；激活时紫色高亮底 + 紫色底边。
|
||
* 仅在 .mg-content 内生效，避免污染登录页等非主区组件。 */
|
||
.mg-content .admin-tabs.el-tabs--border-card {
|
||
height: 100%;
|
||
background: rgba(var(--mg-bg-card-rgb), 0.45) !important;
|
||
border: 1px solid rgba(255, 255, 255, 0.10) !important;
|
||
border-radius: var(--mg-radius);
|
||
box-shadow: var(--mg-glass-shadow);
|
||
backdrop-filter: var(--mg-glass-blur);
|
||
-webkit-backdrop-filter: var(--mg-glass-blur);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.mg-content .admin-tabs.el-tabs--border-card > .el-tabs__header {
|
||
background: rgba(var(--mg-bg-card-darker-rgb), 0.35) !important;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
|
||
margin: 0;
|
||
}
|
||
.mg-content .admin-tabs.el-tabs--border-card > .el-tabs__header .el-tabs__nav {
|
||
border: 0 !important;
|
||
}
|
||
.mg-content .admin-tabs.el-tabs--border-card > .el-tabs__header .el-tabs__item {
|
||
background: transparent !important;
|
||
color: rgba(220, 200, 240, 0.75) !important;
|
||
border: 0 !important;
|
||
height: 42px;
|
||
line-height: 42px;
|
||
font-size: 13.5px;
|
||
letter-spacing: 0.5px;
|
||
padding: 0 18px !important;
|
||
transition: background .2s ease, color .2s ease;
|
||
}
|
||
.mg-content .admin-tabs.el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
|
||
background: rgba(var(--mg-accent-rgb), 0.10) !important;
|
||
color: #fff !important;
|
||
}
|
||
.mg-content .admin-tabs.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
||
background: rgba(var(--mg-accent-rgb), 0.18) !important;
|
||
color: #fff !important;
|
||
font-weight: 600;
|
||
box-shadow: inset 0 -2px 0 0 var(--mg-accent);
|
||
}
|
||
.mg-content .admin-tabs.el-tabs--border-card > .el-tabs__content {
|
||
flex: 1;
|
||
padding: 14px;
|
||
overflow: auto;
|
||
background: transparent !important;
|
||
}
|
||
.mg-content .admin-tabs.el-tabs--border-card .el-tab-pane {
|
||
height: 100%;
|
||
}
|
||
|
||
/* fame-lavender 主题下 admin-tabs 反白：浅紫底 + 深紫字 + 紫色高亮 */
|
||
:root[data-theme="fame-lavender"] .mg-content .admin-tabs.el-tabs--border-card {
|
||
background: #ffffff !important;
|
||
border: 1px solid rgba(124, 58, 237, 0.18) !important;
|
||
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.06) !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .admin-tabs.el-tabs--border-card > .el-tabs__header {
|
||
background: rgba(124, 58, 237, 0.04) !important;
|
||
border-bottom: 1px solid rgba(124, 58, 237, 0.14) !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .admin-tabs.el-tabs--border-card > .el-tabs__header .el-tabs__item {
|
||
color: #4a3d6e !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .admin-tabs.el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
|
||
background: rgba(124, 58, 237, 0.08) !important;
|
||
color: #7c3aed !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .admin-tabs.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
||
background: rgba(124, 58, 237, 0.14) !important;
|
||
color: #7c3aed !important;
|
||
}
|
||
|
||
/* ── 玻璃语境下 Element Plus 的常见组件调整 ── */
|
||
.mg-content .el-card {
|
||
background: linear-gradient(135deg, rgba(var(--mg-bg-card-rgb), 0.55) 0%, rgba(var(--mg-bg-app-deep-rgb), 0.6) 100%) !important;
|
||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||
border-radius: var(--mg-radius);
|
||
backdrop-filter: var(--mg-glass-blur);
|
||
-webkit-backdrop-filter: var(--mg-glass-blur);
|
||
box-shadow: var(--mg-glass-shadow);
|
||
color: var(--mg-text-light);
|
||
transition: var(--mg-transition);
|
||
overflow: hidden;
|
||
}
|
||
.mg-content .el-card:hover {
|
||
background: linear-gradient(135deg, rgba(var(--mg-bg-card-hi-rgb), 0.65) 0%, rgba(var(--mg-bg-card-darker-rgb), 0.67) 100%) !important;
|
||
border-color: rgba(255, 255, 255, 0.22);
|
||
box-shadow: var(--mg-glass-shadow-hi);
|
||
transform: translateY(-2px);
|
||
}
|
||
.mg-content .el-card.no-hover:hover {
|
||
transform: none;
|
||
}
|
||
.mg-content .el-card__header {
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
color: var(--mg-text-light);
|
||
font-weight: 600;
|
||
padding: 14px 18px;
|
||
}
|
||
.mg-content .el-card__body {
|
||
background: transparent !important;
|
||
color: var(--mg-text-light);
|
||
}
|
||
|
||
/* 嵌套的 card（如 ConfigPageBase 内层）使用更浅的透明度 */
|
||
.mg-content .el-card .el-card {
|
||
background: rgba(255, 255, 255, 0.04) !important;
|
||
border-color: rgba(255, 255, 255, 0.1);
|
||
box-shadow: none;
|
||
}
|
||
.mg-content .el-card .el-card:hover {
|
||
background: rgba(255, 255, 255, 0.06) !important;
|
||
transform: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.mg-content h1,
|
||
.mg-content h2,
|
||
.mg-content h3 { color: var(--mg-text-light); margin-top: 0; }
|
||
.mg-content p { color: var(--mg-text-muted); }
|
||
|
||
/* el-statistic 在玻璃语境下 */
|
||
.mg-content .el-statistic__head { color: var(--mg-text-muted); }
|
||
.mg-content .el-statistic__number { color: var(--mg-text-light); }
|
||
.mg-content .el-statistic__content { color: var(--mg-text-light); }
|
||
|
||
/* el-tabs 玻璃语境（SimpleLite 监控台：地图/进程/场景等） */
|
||
.mg-content .el-tabs {
|
||
--el-text-color-primary: #fff;
|
||
}
|
||
.mg-content .el-tabs__item {
|
||
color: rgba(255, 255, 255, 0.82) !important;
|
||
}
|
||
.mg-content .el-tabs__item:hover {
|
||
color: #fff !important;
|
||
}
|
||
.mg-content .el-tabs__item.is-active {
|
||
color: #fff !important;
|
||
font-weight: 600;
|
||
}
|
||
.mg-content .el-tabs__active-bar {
|
||
background-color: var(--mg-accent) !important;
|
||
}
|
||
.mg-content .el-tabs__nav-wrap::after {
|
||
background-color: rgba(255, 255, 255, 0.14) !important;
|
||
}
|
||
|
||
/* el-table 在玻璃语境下 */
|
||
.mg-content .el-table,
|
||
.mg-content .el-table tr,
|
||
.mg-content .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
||
background: transparent !important;
|
||
}
|
||
.mg-content .el-table {
|
||
--el-table-bg-color: transparent;
|
||
--el-table-tr-bg-color: transparent;
|
||
--el-table-header-bg-color: transparent;
|
||
--el-table-row-hover-bg-color: rgba(var(--mg-accent-rgb), 0.18);
|
||
--el-table-border-color: rgba(255, 255, 255, 0.1);
|
||
--el-table-header-text-color: rgba(255, 255, 255, 0.7);
|
||
--el-table-text-color: var(--mg-text-light);
|
||
--el-fill-color-blank: transparent;
|
||
--el-fill-color-light: rgba(255, 255, 255, 0.04);
|
||
color: var(--mg-text-light) !important;
|
||
}
|
||
.mg-content .el-table th.el-table__cell {
|
||
background: rgba(255, 255, 255, 0.06) !important;
|
||
color: rgba(255, 255, 255, 0.75) !important;
|
||
border-bottom-color: rgba(255, 255, 255, 0.12) !important;
|
||
}
|
||
.mg-content .el-table td.el-table__cell {
|
||
background: transparent !important;
|
||
color: var(--mg-text-light) !important;
|
||
border-bottom-color: rgba(255, 255, 255, 0.08) !important;
|
||
}
|
||
.mg-content .el-table--striped .el-table__body tr:nth-child(2n) td.el-table__cell {
|
||
background: rgba(255, 255, 255, 0.03) !important;
|
||
}
|
||
.mg-content .el-table tr:hover > td.el-table__cell,
|
||
.mg-content .el-table__body tr.hover-row > td.el-table__cell {
|
||
background: rgba(var(--mg-accent-rgb), 0.18) !important;
|
||
}
|
||
.mg-content .el-table__empty-block { background: transparent; color: var(--mg-text-dim); }
|
||
.mg-content .el-table__inner-wrapper::before,
|
||
.mg-content .el-table::before { background: rgba(255, 255, 255, 0.1) !important; }
|
||
|
||
/* el-input 在玻璃语境下 (admin 区表单) */
|
||
.mg-content .el-input__wrapper,
|
||
.mg-content .el-textarea__inner {
|
||
background: rgba(255, 255, 255, 0.06) !important;
|
||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
|
||
}
|
||
.mg-content .el-input__wrapper.is-focus {
|
||
box-shadow: 0 0 0 1px rgba(var(--mg-accent-rgb), 0.7) inset, 0 0 16px rgba(var(--mg-primary-hover-rgb), 0.35) !important;
|
||
}
|
||
.mg-content .el-input__inner { color: var(--mg-text-light) !important; }
|
||
.mg-content .el-input__inner::placeholder { color: var(--mg-text-faint); }
|
||
|
||
/* el-form-item label */
|
||
.mg-content .el-form-item__label { color: var(--mg-text-muted) !important; }
|
||
|
||
/* el-divider */
|
||
.mg-content .el-divider__text { background: transparent !important; color: var(--mg-text-muted); }
|
||
.mg-content .el-divider { background: var(--mg-divider); }
|
||
|
||
/* el-tag 在玻璃语境下保持主题色 */
|
||
.mg-content .el-tag {
|
||
background: rgba(var(--mg-accent-rgb), 0.18);
|
||
color: rgba(var(--mg-text-tint-rgb), 1);
|
||
border-color: rgba(var(--mg-accent-rgb), 0.4);
|
||
}
|
||
.mg-content .el-tag--success {
|
||
background: rgba(111, 143, 76, 0.22);
|
||
color: #c0d99c;
|
||
border-color: rgba(111, 143, 76, 0.5);
|
||
}
|
||
.mg-content .el-tag--warning {
|
||
background: rgba(201, 138, 29, 0.22);
|
||
color: #f5cf85;
|
||
border-color: rgba(201, 138, 29, 0.5);
|
||
}
|
||
.mg-content .el-tag--danger {
|
||
background: rgba(179, 50, 79, 0.22);
|
||
color: #ff9bb8;
|
||
border-color: rgba(179, 50, 79, 0.5);
|
||
}
|
||
.mg-content .el-tag--info {
|
||
background: rgba(122, 107, 135, 0.22);
|
||
color: #c9bdd6;
|
||
border-color: rgba(122, 107, 135, 0.5);
|
||
}
|
||
|
||
/* el-descriptions 在玻璃语境 */
|
||
.mg-content .el-descriptions {
|
||
--el-text-color-primary: #fff;
|
||
--el-text-color-regular: var(--mg-text-muted);
|
||
--el-border-color-lighter: rgba(255, 255, 255, 0.12);
|
||
--el-fill-color-blank: transparent;
|
||
color: var(--mg-text-light);
|
||
}
|
||
.mg-content .el-descriptions__body,
|
||
.mg-content .el-descriptions__table {
|
||
background: transparent !important;
|
||
}
|
||
.mg-content .el-descriptions__label,
|
||
.mg-content .el-descriptions__cell.is-bordered-label {
|
||
background: rgba(255, 255, 255, 0.05) !important;
|
||
color: var(--mg-text-muted) !important;
|
||
border-color: rgba(255, 255, 255, 0.12) !important;
|
||
}
|
||
.mg-content .el-descriptions__content,
|
||
.mg-content .el-descriptions__cell.is-bordered-content {
|
||
background: transparent !important;
|
||
color: #fff !important;
|
||
border-color: rgba(255, 255, 255, 0.12) !important;
|
||
}
|
||
.mg-content .el-descriptions__title { color: #fff; }
|
||
|
||
/* el-progress 主题色 */
|
||
.mg-content .el-progress-bar__outer {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
}
|
||
.mg-content .el-progress-bar__inner {
|
||
background: linear-gradient(90deg, var(--mg-primary-hover) 0%, var(--mg-accent) 100%);
|
||
}
|
||
|
||
/* el-alert 玻璃化 */
|
||
.mg-content .el-alert {
|
||
background: rgba(255, 255, 255, 0.06) !important;
|
||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||
color: var(--mg-text-light);
|
||
}
|
||
.mg-content .el-alert__title,
|
||
.mg-content .el-alert__description { color: var(--mg-text-light) !important; }
|
||
|
||
/* el-collapse 玻璃化 */
|
||
.mg-content .el-collapse {
|
||
border-color: rgba(255, 255, 255, 0.1);
|
||
--el-collapse-header-bg-color: transparent;
|
||
--el-collapse-content-bg-color: transparent;
|
||
--el-collapse-header-text-color: #fff;
|
||
--el-collapse-content-text-color: var(--mg-text-light);
|
||
}
|
||
.mg-content .el-collapse-item__header,
|
||
.mg-content .el-collapse-item__wrap {
|
||
background: transparent !important;
|
||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||
color: var(--mg-text-light) !important;
|
||
}
|
||
|
||
/* el-radio / el-checkbox 在玻璃语境下 */
|
||
.mg-content .el-radio__label,
|
||
.mg-content .el-checkbox__label { color: var(--mg-text-light) !important; }
|
||
.mg-content .el-radio__inner,
|
||
.mg-content .el-checkbox__inner {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border-color: rgba(255, 255, 255, 0.32);
|
||
}
|
||
|
||
/* el-radio-button */
|
||
.mg-content .el-radio-button__inner {
|
||
background: rgba(255, 255, 255, 0.06) !important;
|
||
border-color: rgba(255, 255, 255, 0.18) !important;
|
||
color: var(--mg-text-light) !important;
|
||
}
|
||
.mg-content .el-radio-button.is-active .el-radio-button__inner {
|
||
background: var(--mg-primary) !important;
|
||
border-color: var(--mg-primary) !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
/* el-select 玻璃化 */
|
||
.mg-content .el-select .el-input__wrapper {
|
||
background: rgba(255, 255, 255, 0.06) !important;
|
||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
|
||
}
|
||
|
||
/* el-input-number 玻璃化 */
|
||
.mg-content .el-input-number .el-input-number__decrease,
|
||
.mg-content .el-input-number .el-input-number__increase {
|
||
background: rgba(255, 255, 255, 0.06) !important;
|
||
color: var(--mg-text-muted) !important;
|
||
border-color: rgba(255, 255, 255, 0.15) !important;
|
||
}
|
||
|
||
/* el-switch 主题色 */
|
||
.mg-content .el-switch.is-checked .el-switch__core {
|
||
background: var(--mg-primary);
|
||
border-color: var(--mg-primary);
|
||
}
|
||
|
||
/* el-statistic 颜色重置 */
|
||
.mg-content .el-statistic .el-statistic__head {
|
||
color: var(--mg-text-muted);
|
||
font-size: 13px;
|
||
}
|
||
.mg-content .el-statistic .el-statistic__number,
|
||
.mg-content .el-statistic .el-statistic__content {
|
||
color: #fff;
|
||
font-weight: 600;
|
||
text-shadow: 0 2px 8px rgba(var(--mg-primary-hover-rgb), 0.4);
|
||
}
|
||
|
||
/* KPI 玻璃卡片：<el-row class="kpi-row"> 内的 el-statistic 自动玻璃化 */
|
||
.mg-content .kpi-row .el-statistic,
|
||
.mg-content .kpi-card {
|
||
background: linear-gradient(135deg, rgba(var(--mg-bg-card-rgb), 0.55) 0%, rgba(var(--mg-bg-app-deep-rgb), 0.6) 100%);
|
||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||
border-radius: var(--mg-radius);
|
||
padding: 16px 18px;
|
||
backdrop-filter: var(--mg-glass-blur);
|
||
-webkit-backdrop-filter: var(--mg-glass-blur);
|
||
box-shadow: var(--mg-glass-shadow);
|
||
transition: var(--mg-transition);
|
||
}
|
||
.mg-content .kpi-row .el-statistic:hover,
|
||
.mg-content .kpi-card:hover {
|
||
background: linear-gradient(135deg, rgba(var(--mg-bg-card-hi-rgb), 0.65) 0%, rgba(var(--mg-bg-card-darker-rgb), 0.67) 100%);
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--mg-glass-shadow-hi);
|
||
border-color: rgba(255, 255, 255, 0.22);
|
||
}
|
||
|
||
/* el-pagination 玻璃化 */
|
||
.mg-content .el-pagination {
|
||
--el-pagination-bg-color: transparent;
|
||
--el-pagination-button-bg-color: rgba(255, 255, 255, 0.06);
|
||
--el-pagination-button-color: var(--mg-text-light);
|
||
--el-pagination-hover-color: var(--mg-accent);
|
||
color: var(--mg-text-muted);
|
||
}
|
||
|
||
/* el-dropdown-menu 暗化 */
|
||
.el-dropdown-menu {
|
||
background: rgba(var(--mg-bg-aside-rgb), 0.92) !important;
|
||
backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255, 255, 255, 0.12) !important;
|
||
}
|
||
.el-dropdown-menu__item {
|
||
color: rgba(255, 255, 255, 0.8) !important;
|
||
}
|
||
.el-dropdown-menu__item:hover {
|
||
background: rgba(var(--mg-accent-rgb), 0.18) !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
/* el-message / 全局消息提示沿用 Element Plus 默认浅色（在暗背景上更易读） */
|
||
|
||
/* el-button default 按钮在玻璃语境下 */
|
||
.mg-content .el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--text) {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border-color: rgba(255, 255, 255, 0.2);
|
||
color: var(--mg-text-light);
|
||
}
|
||
.mg-content .el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--text):hover {
|
||
background: rgba(var(--mg-accent-rgb), 0.18);
|
||
border-color: rgba(var(--mg-accent-rgb), 0.5);
|
||
color: #fff;
|
||
}
|
||
|
||
/* h2 在浅色页面（如对话框）保留主题深色 */
|
||
.el-dialog h2 { color: var(--mg-primary-active); }
|
||
.el-dialog { border-radius: var(--mg-radius); }
|
||
|
||
/* ─────────────── 星云紫专项：深紫底 + 蓝紫辉光 + 霓虹高光 ─────────────── */
|
||
:root[data-theme="industrial-purple"] {
|
||
--mg-orb-a-opacity: 0.55;
|
||
--mg-orb-b-opacity: 0.50;
|
||
--mg-orb-c-opacity: 0.42;
|
||
--mg-glass-bg: rgba(28, 14, 62, 0.62);
|
||
--mg-glass-bg-hover: rgba(44, 22, 88, 0.72);
|
||
--mg-glass-border: rgba(var(--mg-accent-rgb), 0.18);
|
||
--mg-glass-border-hi: rgba(var(--mg-accent-rgb), 0.55);
|
||
--mg-glass-shadow:
|
||
0 12px 32px rgba(0, 0, 0, 0.55),
|
||
0 0 24px rgba(var(--mg-primary-rgb), 0.25),
|
||
0 0 0 1px rgba(var(--mg-accent-rgb), 0.10) inset,
|
||
0 1px 0 rgba(255, 255, 255, 0.14) inset;
|
||
--mg-glass-shadow-hi:
|
||
0 20px 50px rgba(0, 0, 0, 0.68),
|
||
0 0 42px rgba(var(--mg-primary-hover-rgb), 0.42),
|
||
0 0 0 1px rgba(var(--mg-accent-rgb), 0.32) inset,
|
||
0 1px 0 rgba(255, 255, 255, 0.24) inset;
|
||
--mg-text-muted: rgba(255, 255, 255, 0.86);
|
||
--mg-text-dim: rgba(220, 200, 252, 0.70);
|
||
}
|
||
|
||
:root[data-theme="industrial-purple"] body {
|
||
background:
|
||
radial-gradient(circle at 8% 8%, rgba(var(--mg-primary-hover-rgb), 0.55) 0%, transparent 48%),
|
||
radial-gradient(ellipse at 92% 18%, rgba(var(--mg-accent-rgb), 0.28) 0%, transparent 42%),
|
||
radial-gradient(circle at 78% 88%, rgba(var(--mg-primary-rgb), 0.55) 0%, transparent 46%),
|
||
radial-gradient(ellipse at 18% 92%, rgba(99, 102, 241, 0.30) 0%, transparent 48%),
|
||
linear-gradient(135deg, var(--mg-bg-app-1) 0%, var(--mg-bg-app-2) 48%, var(--mg-bg-app-3) 100%);
|
||
}
|
||
|
||
/* 星云紫主题下:网格更紫,扫描线更明显 */
|
||
:root[data-theme="industrial-purple"] #app::before {
|
||
background-image:
|
||
linear-gradient(rgba(var(--mg-accent-rgb), 0.07) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(var(--mg-accent-rgb), 0.07) 1px, transparent 1px);
|
||
opacity: 0.85;
|
||
}
|
||
:root[data-theme="industrial-purple"] #app::after {
|
||
background-image: repeating-linear-gradient(
|
||
0deg,
|
||
rgba(var(--mg-accent-rgb), 0.03) 0,
|
||
rgba(var(--mg-accent-rgb), 0.03) 1px,
|
||
transparent 1px,
|
||
transparent 3px
|
||
);
|
||
}
|
||
|
||
/* 卡片：紫色玻璃质感 */
|
||
:root[data-theme="industrial-purple"] .mg-content .el-card,
|
||
:root[data-theme="industrial-purple"] .mg-content .kpi-row .el-statistic,
|
||
:root[data-theme="industrial-purple"] .mg-content .kpi-card {
|
||
position: relative;
|
||
background:
|
||
linear-gradient(145deg,
|
||
rgba(var(--mg-bg-card-rgb), 0.78) 0%,
|
||
rgba(var(--mg-bg-app-deep-rgb), 0.86) 100%) !important;
|
||
border: 1px solid rgba(var(--mg-accent-rgb), 0.14) !important;
|
||
border-radius: var(--mg-radius) !important;
|
||
box-shadow:
|
||
0 12px 30px rgba(0, 0, 0, 0.5),
|
||
0 0 22px rgba(var(--mg-primary-rgb), 0.16),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
|
||
backdrop-filter: blur(18px) saturate(160%);
|
||
-webkit-backdrop-filter: blur(18px) saturate(160%);
|
||
overflow: hidden;
|
||
}
|
||
/* 顶部 1px 高光线 → 玻璃质感的灵魂 */
|
||
:root[data-theme="industrial-purple"] .mg-content .el-card::before,
|
||
:root[data-theme="industrial-purple"] .mg-content .kpi-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 10%; right: 10%;
|
||
height: 1px;
|
||
background: linear-gradient(90deg,
|
||
transparent 0%,
|
||
rgba(var(--mg-accent-rgb), 0.55) 30%,
|
||
rgba(255, 255, 255, 0.85) 50%,
|
||
rgba(var(--mg-accent-rgb), 0.55) 70%,
|
||
transparent 100%);
|
||
pointer-events: none;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
:root[data-theme="industrial-purple"] .mg-content .el-card:hover,
|
||
:root[data-theme="industrial-purple"] .mg-content .kpi-row .el-statistic:hover,
|
||
:root[data-theme="industrial-purple"] .mg-content .kpi-card:hover {
|
||
background:
|
||
linear-gradient(145deg,
|
||
rgba(var(--mg-bg-card-hi-rgb), 0.85) 0%,
|
||
rgba(var(--mg-bg-card-darker-rgb), 0.92) 100%) !important;
|
||
border-color: rgba(var(--mg-accent-rgb), 0.42) !important;
|
||
box-shadow:
|
||
0 18px 40px rgba(0, 0, 0, 0.6),
|
||
0 0 38px rgba(var(--mg-primary-hover-rgb), 0.38),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
|
||
}
|
||
|
||
:root[data-theme="industrial-purple"] .mg-content .el-card .el-card {
|
||
background: rgba(var(--mg-bg-card-darker-rgb), 0.55) !important;
|
||
}
|
||
:root[data-theme="industrial-purple"] .mg-content .el-card .el-card::before {
|
||
display: none;
|
||
}
|
||
|
||
:root[data-theme="industrial-purple"] .mg-content .el-statistic__head {
|
||
color: rgba(255, 255, 255, 0.78) !important;
|
||
}
|
||
:root[data-theme="industrial-purple"] .mg-content .el-statistic__number,
|
||
:root[data-theme="industrial-purple"] .mg-content .el-statistic__content {
|
||
background: linear-gradient(135deg, #ffffff 0%, rgba(var(--mg-accent-rgb), 1) 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent !important;
|
||
text-shadow: 0 0 24px rgba(var(--mg-primary-hover-rgb), 0.5);
|
||
}
|
||
|
||
:root[data-theme="industrial-purple"] .mg-content .el-table th.el-table__cell {
|
||
background: rgba(var(--mg-bg-card-darker-rgb), 0.75) !important;
|
||
}
|
||
|
||
:root[data-theme="industrial-purple"] .mg-content .el-input__wrapper,
|
||
:root[data-theme="industrial-purple"] .mg-content .el-textarea__inner {
|
||
background: rgba(var(--mg-bg-card-darker-rgb), 0.55) !important;
|
||
box-shadow: 0 0 0 1px rgba(var(--mg-accent-rgb), 0.18) inset !important;
|
||
}
|
||
|
||
/* 主按钮：紫色霓虹脉冲 */
|
||
:root[data-theme="industrial-purple"] .el-button--primary {
|
||
background: linear-gradient(135deg,
|
||
var(--mg-primary) 0%,
|
||
var(--mg-primary-hover) 100%) !important;
|
||
border: none !important;
|
||
box-shadow:
|
||
0 8px 22px rgba(var(--mg-primary-rgb), 0.45),
|
||
0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
:root[data-theme="industrial-purple"] .el-button--primary::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: -120%;
|
||
width: 80%; height: 100%;
|
||
background: linear-gradient(110deg,
|
||
transparent 0%,
|
||
rgba(255, 255, 255, 0.0) 30%,
|
||
rgba(255, 255, 255, 0.35) 50%,
|
||
rgba(255, 255, 255, 0.0) 70%,
|
||
transparent 100%);
|
||
transition: left .6s cubic-bezier(.25, .8, .25, 1);
|
||
}
|
||
:root[data-theme="industrial-purple"] .el-button--primary:hover::after { left: 120%; }
|
||
:root[data-theme="industrial-purple"] .el-button--primary:hover {
|
||
box-shadow:
|
||
0 12px 32px rgba(var(--mg-primary-rgb), 0.6),
|
||
0 0 28px rgba(var(--mg-primary-hover-rgb), 0.55),
|
||
0 0 0 1px rgba(var(--mg-accent-rgb), 0.4) inset !important;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* el-tag 增强紫色感 */
|
||
:root[data-theme="industrial-purple"] .mg-content .el-tag {
|
||
background: linear-gradient(135deg, rgba(var(--mg-primary-rgb), 0.25), rgba(var(--mg-accent-rgb), 0.18));
|
||
color: #fff;
|
||
border-color: rgba(var(--mg-accent-rgb), 0.45);
|
||
}
|
||
|
||
/* 工具类：霓虹文字（卡片标题、KPI数值可用） */
|
||
.mg-neon-text {
|
||
background: linear-gradient(135deg, #ffffff 0%, var(--mg-accent) 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
text-shadow: 0 0 18px rgba(var(--mg-primary-hover-rgb), 0.45);
|
||
}
|
||
|
||
/* 工具类：浮动 orb 节奏可视化（其他组件可用） */
|
||
@keyframes mg-pulse-glow {
|
||
0%, 100% {
|
||
box-shadow:
|
||
0 0 0 0 rgba(var(--mg-accent-rgb), 0.35),
|
||
0 0 28px rgba(var(--mg-primary-hover-rgb), 0.35);
|
||
}
|
||
50% {
|
||
box-shadow:
|
||
0 0 0 6px rgba(var(--mg-accent-rgb), 0),
|
||
0 0 38px rgba(var(--mg-primary-hover-rgb), 0.55);
|
||
}
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════════════
|
||
* 迷毂浅紫 (fame-lavender) ─ 参考 FAME 系统的浅色变体
|
||
* 设计目标：长时间使用不刺眼；右侧主区采用浅紫白底，深紫字色；
|
||
* 侧栏保留深紫渐变以维持品牌一致性；
|
||
* 关闭所有 orb / 网格 / 扫描线 / 霓虹光效。
|
||
* ════════════════════════════════════════════════════════════════════ */
|
||
:root[data-theme="fame-lavender"] {
|
||
--mg-glass-bg: rgba(255, 255, 255, 0.95);
|
||
--mg-glass-bg-hover: rgba(249, 246, 255, 1);
|
||
--mg-glass-bg-active: rgba(245, 240, 251, 1);
|
||
--mg-glass-border: rgba(124, 58, 237, 0.14);
|
||
--mg-glass-border-hi: rgba(124, 58, 237, 0.35);
|
||
--mg-glass-shadow:
|
||
0 4px 14px rgba(45, 27, 105, 0.06),
|
||
0 0 0 1px rgba(124, 58, 237, 0.06);
|
||
--mg-glass-shadow-hi:
|
||
0 8px 24px rgba(45, 27, 105, 0.10),
|
||
0 0 0 1px rgba(124, 58, 237, 0.15);
|
||
--mg-glass-blur: none;
|
||
--mg-glass-blur-hi: none;
|
||
|
||
/* 文字层级（v2 升级：对比度从 4.5:1 提至 7-15:1，关键提升正文清晰度） */
|
||
--mg-text-light: #1a0f3d; /* 主标题 / KPI 数字 · 对比 ~15:1 */
|
||
--mg-text-muted: #4a3d6e; /* 正文 / 说明文字 · 对比 ~9:1 (旧 #606266 在浅紫底上仅 5:1) */
|
||
--mg-text-dim: #7a6b9a; /* 次要信息 / 时间戳 / 占位 · 对比 ~5:1 */
|
||
--mg-text-faint: #a8a0c0; /* 禁用 / 装饰文字 · 对比 ~3:1 */
|
||
--mg-divider: #e8e1f0; /* 分割线 / 卡片描边（比 #ebe5f4 略冷略深，更清晰） */
|
||
|
||
/* 浅色主题状态色 (WCAG AA 兼容) */
|
||
--mg-status-success: #15803d;
|
||
--mg-status-success-rgb: 21, 128, 61;
|
||
--mg-status-warning: #b45309;
|
||
--mg-status-warning-rgb: 180, 83, 9;
|
||
--mg-status-danger: #b91c1c;
|
||
--mg-status-danger-rgb: 185, 28, 28;
|
||
--mg-status-info: #1d4ed8;
|
||
--mg-status-info-rgb: 29, 78, 216;
|
||
--mg-status-idle: #64748b;
|
||
--mg-status-idle-rgb: 100, 116, 139;
|
||
|
||
/* 内嵌表面 veil：浅紫主题翻成紫色微透，保证白底卡片内的嵌套行 / 子卡可见 */
|
||
--mg-veil-1: rgba(124, 58, 237, 0.05);
|
||
--mg-veil-2: rgba(124, 58, 237, 0.10);
|
||
--mg-veil-3: rgba(124, 58, 237, 0.16);
|
||
--mg-veil-border: rgba(124, 58, 237, 0.16);
|
||
--mg-veil-border-hi: rgba(124, 58, 237, 0.32);
|
||
|
||
/* 动作按钮：实色紫底 + 白字（对比 ~6.9:1，WCAG AA 通过） */
|
||
--mg-action-bg: #7c3aed;
|
||
--mg-action-bg-hover: #6d28d9;
|
||
--mg-action-border: #7c3aed;
|
||
--mg-action-border-hi: #6d28d9;
|
||
}
|
||
|
||
/* body：纯净紫白渐变（更柔和、长时间阅读不刺眼） */
|
||
:root[data-theme="fame-lavender"] body {
|
||
background:
|
||
linear-gradient(160deg, #edeaf5 0%, #e7e4f1 55%, #f1eef8 100%) !important;
|
||
color: #1a0f3d;
|
||
}
|
||
|
||
/* 关闭全局背景网格与扫描线 */
|
||
:root[data-theme="fame-lavender"] #app::before,
|
||
:root[data-theme="fame-lavender"] #app::after {
|
||
display: none !important;
|
||
}
|
||
|
||
/* 关闭 AppShell 中的浮动 orb */
|
||
:root[data-theme="fame-lavender"] .bg-orbs { display: none !important; }
|
||
|
||
/* 侧栏：宝石紫渐变 + 高可读性 menu 状态（v2 优化对比度与层级） */
|
||
:root[data-theme="fame-lavender"] .aside {
|
||
background: linear-gradient(180deg, #2e1065 0%, #1c0a4d 100%) !important;
|
||
border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
box-shadow: 4px 0 24px rgba(45, 27, 105, 0.18) !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .aside::before { display: none !important; }
|
||
:root[data-theme="fame-lavender"] .aside .logo {
|
||
background: transparent !important;
|
||
border-bottom: 1px solid rgba(196, 181, 253, 0.12) !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .aside .logo-title-zh {
|
||
background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 100%) !important;
|
||
-webkit-background-clip: text !important;
|
||
background-clip: text !important;
|
||
-webkit-text-fill-color: transparent !important;
|
||
color: transparent !important;
|
||
text-shadow: none !important;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* inactive menu item：浅紫白文字（提高可读性，比纯白稍柔和）
|
||
* 会话 14：原规则同样误用了 Vue scoped 专属的 :deep()，在全局 css 中无效。
|
||
* 去掉 :deep() 后规则才能落到 element-plus 渲染出的 .el-menu-item / .el-sub-menu__title 上。 */
|
||
:root[data-theme="fame-lavender"] .aside .el-menu {
|
||
background: transparent !important;
|
||
border-right: none !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .aside .el-menu-item,
|
||
:root[data-theme="fame-lavender"] .aside .el-sub-menu__title {
|
||
color: #d4cae8 !important;
|
||
font-weight: 500 !important;
|
||
background: transparent !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .aside .el-menu-item:hover,
|
||
:root[data-theme="fame-lavender"] .aside .el-sub-menu__title:hover {
|
||
background: rgba(196, 181, 253, 0.10) !important;
|
||
color: #ffffff !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .aside .el-menu-item.is-active,
|
||
:root[data-theme="fame-lavender"] .aside .el-sub-menu.is-active > .el-sub-menu__title {
|
||
background: linear-gradient(90deg, rgba(168, 85, 247, 0.30) 0%, rgba(124, 58, 237, 0.16) 100%) !important;
|
||
color: #ffffff !important;
|
||
font-weight: 700 !important;
|
||
box-shadow: inset 3px 0 0 #c4b5fd !important;
|
||
text-shadow: none !important;
|
||
}
|
||
|
||
/* 子菜单 active 区分（左条更细更柔和） */
|
||
:root[data-theme="fame-lavender"] .aside .el-menu .el-menu-item.is-active {
|
||
background: linear-gradient(90deg, rgba(168, 85, 247, 0.22) 0%, transparent 100%) !important;
|
||
box-shadow: inset 2px 0 0 #a855f7 !important;
|
||
}
|
||
|
||
/* 顶部 header：白色卡片质感 */
|
||
:root[data-theme="fame-lavender"] .header {
|
||
background: #fff !important;
|
||
border-bottom: 1px solid #ebe5f4 !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
box-shadow: 0 1px 6px rgba(45, 27, 105, 0.05) !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .header::after { display: none !important; }
|
||
/* 会话 14：原规则误用 Vue scoped 专属的 :deep() 伪类写在全局 css 里，浏览器不识别 → 整条规则
|
||
* 被丢弃，AppShell.vue scoped 中的白色面包屑文字在 fame-lavender 白底 header 上完全看不见。
|
||
* 这里去掉 :deep()，直接用普通后代选择器；特异性 (0,4,0) + !important 足以覆盖 scoped 的 (0,2,0)。
|
||
* 同时补上面包屑分隔符 "/" 的色，原默认是 rgba(255,255,255,.35)，在白底上也不可见。 */
|
||
:root[data-theme="fame-lavender"] .header .el-breadcrumb__inner { color: #4a3d6e !important; font-weight: 500; }
|
||
:root[data-theme="fame-lavender"] .header .el-breadcrumb__item:last-child .el-breadcrumb__inner {
|
||
color: #7c3aed !important;
|
||
font-weight: 700;
|
||
}
|
||
:root[data-theme="fame-lavender"] .header .el-breadcrumb__separator { color: #a8a0c0 !important; }
|
||
:root[data-theme="fame-lavender"] .header .el-breadcrumb__inner:hover { color: #7c3aed !important; }
|
||
:root[data-theme="fame-lavender"] .header .icon-btn {
|
||
border-color: #ebe5f4 !important;
|
||
color: #7c3aed !important;
|
||
background: #f8f4fc !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .header .icon-btn:hover {
|
||
background: #ede9fe !important;
|
||
border-color: #c4b5fd !important;
|
||
color: #5b21b6 !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .header .runmode-tag {
|
||
background: #f5f3ff !important;
|
||
border-color: #ddd6fe !important;
|
||
color: #5b21b6 !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .header .runmode-tag.WebEnabled {
|
||
background: #ecfdf5 !important;
|
||
border-color: #bbf7d0 !important;
|
||
color: #047857 !important;
|
||
}
|
||
/* 会话 N+2：补 WebOnly 适配。原默认深主题 .runmode-tag.WebOnly 用 var(--mg-accent) 浅紫白字，
|
||
在 fame-lavender 白色 header 上跟背景同色 → 完全看不见。这里强制为「紫色描边 + 深紫字」。 */
|
||
:root[data-theme="fame-lavender"] .header .runmode-tag.WebOnly {
|
||
background: #ede9fe !important;
|
||
border-color: #c4b5fd !important;
|
||
color: #6d28d9 !important;
|
||
}
|
||
|
||
/* 会话 N+2：header 内 ScopeSwitcher (el-radio-button) 在 fame-lavender 白底下的适配。
|
||
* 默认深主题下 .mg-content .el-radio-button 已配深底白字，但 header 不在 .mg-content 里，
|
||
* 所以 fame-lavender 切到白底 header 时 element-plus 默认样式 (#fff 底 + #606266 字) 接管，
|
||
* 看起来"灰色椭圆 + 几乎不可读" —— 这里强制改成紫色描边 + 深紫字，激活态紫底白字。 */
|
||
:root[data-theme="fame-lavender"] .header .el-radio-button__inner {
|
||
background: #fff !important;
|
||
border-color: #ddd6fe !important;
|
||
color: #5b21b6 !important;
|
||
font-weight: 500;
|
||
}
|
||
:root[data-theme="fame-lavender"] .header .el-radio-button__inner:hover {
|
||
color: #6d28d9 !important;
|
||
border-color: #c4b5fd !important;
|
||
background: #f5f3ff !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .header .el-radio-button.is-active .el-radio-button__inner {
|
||
background: #7c3aed !important;
|
||
border-color: #7c3aed !important;
|
||
color: #ffffff !important;
|
||
box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
|
||
}
|
||
:root[data-theme="fame-lavender"] .header .user-link {
|
||
background: #f8f4fc !important;
|
||
border-color: #ebe5f4 !important;
|
||
color: #2d1b69 !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .header .user-link:hover {
|
||
background: #ede9fe !important;
|
||
border-color: #c4b5fd !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .header .user-name { color: #2d1b69 !important; }
|
||
|
||
/* 主内容区：纯净紫白底 + 高对比深字（v2 文字层级清晰化） */
|
||
:root[data-theme="fame-lavender"] .main,
|
||
:root[data-theme="fame-lavender"] .mg-content {
|
||
background: transparent !important;
|
||
color: #1a0f3d !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content h1,
|
||
:root[data-theme="fame-lavender"] .mg-content h2,
|
||
:root[data-theme="fame-lavender"] .mg-content h3 {
|
||
color: #1a0f3d !important;
|
||
font-weight: 700;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content p { color: #4a3d6e !important; }
|
||
:root[data-theme="fame-lavender"] .mg-content small,
|
||
:root[data-theme="fame-lavender"] .mg-content .text-secondary { color: #7a6b9a !important; }
|
||
|
||
/* footer */
|
||
:root[data-theme="fame-lavender"] .footer {
|
||
background: rgba(255, 255, 255, 0.7) !important;
|
||
border-top: 1px solid #ebe5f4 !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
color: #909399 !important;
|
||
}
|
||
|
||
/* el-card：白底紫描边 + 双层阴影（紫色阴影更显品牌） */
|
||
:root[data-theme="fame-lavender"] .mg-content .el-card {
|
||
background: #ffffff !important;
|
||
border: 1px solid #e2dbf0 !important;
|
||
border-radius: 14px !important;
|
||
box-shadow:
|
||
0 1px 2px rgba(45, 27, 105, 0.05),
|
||
0 10px 26px rgba(108, 71, 200, 0.10) !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
color: #1a0f3d !important;
|
||
overflow: hidden;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-card::before { display: none !important; }
|
||
:root[data-theme="fame-lavender"] .mg-content .el-card:hover {
|
||
background: #ffffff !important;
|
||
border-color: #c4b5fd !important;
|
||
box-shadow:
|
||
0 4px 14px rgba(45, 27, 105, 0.10),
|
||
0 18px 40px rgba(108, 71, 200, 0.16) !important;
|
||
transform: translateY(-2px) !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-card .el-card {
|
||
background: #faf7fd !important;
|
||
border-color: #f0eaf6 !important;
|
||
box-shadow: none !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-card__header {
|
||
background: #faf7fd !important;
|
||
border-bottom: 1px solid #e8e1f0 !important;
|
||
color: #1a0f3d !important;
|
||
font-weight: 600;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-card__body {
|
||
background: transparent !important;
|
||
color: #1a0f3d !important;
|
||
}
|
||
|
||
/* KPI 玻璃卡片：浅底化 */
|
||
:root[data-theme="fame-lavender"] .mg-content .kpi-row .el-statistic,
|
||
:root[data-theme="fame-lavender"] .mg-content .kpi-card {
|
||
background: #fff !important;
|
||
border: 1px solid #e2dbf0 !important;
|
||
border-radius: 12px !important;
|
||
box-shadow:
|
||
0 1px 2px rgba(45, 27, 105, 0.05),
|
||
0 8px 22px rgba(108, 71, 200, 0.10) !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
padding: 16px 18px !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .kpi-row .el-statistic:hover,
|
||
:root[data-theme="fame-lavender"] .mg-content .kpi-card:hover {
|
||
background: #fff !important;
|
||
border-color: #c4b5fd !important;
|
||
box-shadow:
|
||
0 4px 14px rgba(45, 27, 105, 0.09),
|
||
0 14px 32px rgba(108, 71, 200, 0.15) !important;
|
||
transform: translateY(-2px) !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-statistic__head { color: #4a3d6e !important; font-weight: 500; }
|
||
:root[data-theme="fame-lavender"] .mg-content .el-statistic__number,
|
||
:root[data-theme="fame-lavender"] .mg-content .el-statistic__content {
|
||
background: none !important;
|
||
-webkit-background-clip: initial !important;
|
||
background-clip: initial !important;
|
||
color: #1a0f3d !important;
|
||
text-shadow: none !important;
|
||
font-family: var(--mg-font-mono);
|
||
font-variant-numeric: tabular-nums;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* el-table：浅底高对比 + 紫色 hover */
|
||
:root[data-theme="fame-lavender"] .mg-content .el-table {
|
||
--el-table-bg-color: #ffffff;
|
||
--el-table-tr-bg-color: #ffffff;
|
||
--el-table-header-bg-color: #faf7fd;
|
||
--el-table-row-hover-bg-color: #f5f3ff;
|
||
--el-table-border-color: #e8e1f0;
|
||
--el-table-header-text-color: #1a0f3d;
|
||
--el-table-text-color: #1a0f3d;
|
||
--el-fill-color-blank: #ffffff;
|
||
--el-fill-color-light: #faf7fd;
|
||
color: #1a0f3d !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-table,
|
||
:root[data-theme="fame-lavender"] .mg-content .el-table tr {
|
||
background: #ffffff !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-table th.el-table__cell {
|
||
background: #faf7fd !important;
|
||
color: #1a0f3d !important;
|
||
border-bottom-color: #e8e1f0 !important;
|
||
font-weight: 600;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-table td.el-table__cell {
|
||
background: #ffffff !important;
|
||
color: #1a0f3d !important;
|
||
border-bottom-color: #f0eaf6 !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-table--striped .el-table__body tr:nth-child(2n) td.el-table__cell {
|
||
background: #faf7fd !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-table tr:hover > td.el-table__cell {
|
||
background: #f5f3ff !important;
|
||
}
|
||
|
||
/* el-input / el-textarea / el-select：浅底 + 深字 + 焦点紫光晕 */
|
||
:root[data-theme="fame-lavender"] .mg-content .el-input__wrapper,
|
||
:root[data-theme="fame-lavender"] .mg-content .el-textarea__inner,
|
||
:root[data-theme="fame-lavender"] .mg-content .el-select .el-input__wrapper {
|
||
background: #ffffff !important;
|
||
box-shadow: 0 0 0 1px #e0d4f5 inset !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-input__wrapper:hover {
|
||
box-shadow: 0 0 0 1px #c4b5fd inset !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-input__wrapper.is-focus {
|
||
box-shadow:
|
||
0 0 0 1px #7c3aed inset,
|
||
0 0 0 3px rgba(124, 58, 237, 0.15) !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-input__inner,
|
||
:root[data-theme="fame-lavender"] .mg-content .el-textarea__inner { color: #1a0f3d !important; font-weight: 500; }
|
||
:root[data-theme="fame-lavender"] .mg-content .el-input__inner::placeholder,
|
||
:root[data-theme="fame-lavender"] .mg-content .el-textarea__inner::placeholder { color: #a8a0c0 !important; }
|
||
:root[data-theme="fame-lavender"] .mg-content .el-form-item__label { color: #4a3d6e !important; font-weight: 500; }
|
||
|
||
/* el-tabs：紫色活跃 + 高对比 */
|
||
/* 浅色主题下 el-tabs 容器内不再继承玻璃主题强制白字，恢复深色 primary，
|
||
避免 .mg-content .el-tabs { --el-text-color-primary: #fff } 把内部 h2 / label
|
||
一并染白后出现"白底白字"（车辆管理标题、其他 tabs 内 .ref-mgr-title 同理）。 */
|
||
:root[data-theme="fame-lavender"] .mg-content .el-tabs {
|
||
--el-text-color-primary: #2d1b69 !important;
|
||
--el-text-color-regular: #303133 !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-tabs__item { color: #4a3d6e !important; font-weight: 500; }
|
||
:root[data-theme="fame-lavender"] .mg-content .el-tabs__item:hover { color: #7c3aed !important; }
|
||
:root[data-theme="fame-lavender"] .mg-content .el-tabs__item.is-active {
|
||
color: #7c3aed !important;
|
||
font-weight: 700;
|
||
}
|
||
/* 兜底：element-plus 内部 css 改版后曾出现「.el-tabs__item 不在 .mg-content 路径下」的场景，
|
||
再加一组不带 .mg-content 限定的规则，避免在 dialog / drawer 中弹出的 tabs 仍然白字。 */
|
||
:root[data-theme="fame-lavender"] .el-tabs__item { color: #4a3d6e !important; }
|
||
:root[data-theme="fame-lavender"] .el-tabs__item:hover { color: #7c3aed !important; }
|
||
:root[data-theme="fame-lavender"] .el-tabs__item.is-active { color: #7c3aed !important; font-weight: 700; }
|
||
:root[data-theme="fame-lavender"] .mg-content .el-tabs__active-bar {
|
||
background-color: #7c3aed !important;
|
||
height: 3px !important;
|
||
border-radius: 2px;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-tabs__nav-wrap::after { background-color: #e8e1f0 !important; }
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────────
|
||
* ReflectionManagerPanel / CarPanelView 等 tabs 内长标题（会话 N+2 UI 修复）
|
||
* 问题：组件 scoped CSS 写 `color: var(--el-text-color-primary, #fff)`，
|
||
* 但在 el-tab-pane 嵌套层级里变量没下传，回退到 #fff → 浅紫背景白字看不清。
|
||
* 解法：在 fame-lavender 主题下直接给关键文字类「深紫色 #2d1b69」+ !important，
|
||
* 优先级压过 scoped css。同时把面板卡片底色从深紫透明改成白色，对比足够。
|
||
* ───────────────────────────────────────────────────────────────────────── */
|
||
:root[data-theme="fame-lavender"] .mg-content .ref-mgr-page,
|
||
:root[data-theme="fame-lavender"] .mg-content .ref-mgr-title,
|
||
:root[data-theme="fame-lavender"] .mg-content .field-section-title,
|
||
:root[data-theme="fame-lavender"] .mg-content .detail-name {
|
||
color: #2d1b69 !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .ref-mgr-title { font-weight: 700; }
|
||
:root[data-theme="fame-lavender"] .mg-content .detail-id,
|
||
:root[data-theme="fame-lavender"] .mg-content .ref-type-asm,
|
||
:root[data-theme="fame-lavender"] .mg-content .field-empty {
|
||
color: #7a6b9a !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .ref-mgr-list-card,
|
||
:root[data-theme="fame-lavender"] .mg-content .ref-mgr-detail-card {
|
||
background: #ffffff !important;
|
||
border: 1px solid rgba(124, 58, 237, 0.16) !important;
|
||
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.06) !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .ref-mgr-header,
|
||
:root[data-theme="fame-lavender"] .mg-content .detail-header {
|
||
border-color: rgba(124, 58, 237, 0.18) !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .field-section {
|
||
color: #303133;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .status-value {
|
||
color: #303133 !important;
|
||
}
|
||
|
||
/* el-tag：浅紫 */
|
||
:root[data-theme="fame-lavender"] .mg-content .el-tag {
|
||
background: #ede9fe !important;
|
||
color: #5b21b6 !important;
|
||
border-color: #ddd6fe !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-tag--success {
|
||
background: #ecfdf5 !important;
|
||
color: #047857 !important;
|
||
border-color: #bbf7d0 !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-tag--warning {
|
||
background: #fffbeb !important;
|
||
color: #b45309 !important;
|
||
border-color: #fde68a !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-tag--danger {
|
||
background: #fef2f2 !important;
|
||
color: #b91c1c !important;
|
||
border-color: #fecaca !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-tag--info {
|
||
background: #f3f4f6 !important;
|
||
color: #4b5563 !important;
|
||
border-color: #e5e7eb !important;
|
||
}
|
||
|
||
/* el-descriptions */
|
||
:root[data-theme="fame-lavender"] .mg-content .el-descriptions {
|
||
--el-text-color-primary: #2d1b69;
|
||
--el-text-color-regular: #606266;
|
||
--el-border-color-lighter: #ebe5f4;
|
||
--el-fill-color-blank: #fff;
|
||
color: #303133 !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-descriptions__label,
|
||
:root[data-theme="fame-lavender"] .mg-content .el-descriptions__cell.is-bordered-label {
|
||
background: #faf7fd !important;
|
||
color: #606266 !important;
|
||
border-color: #ebe5f4 !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-descriptions__content,
|
||
:root[data-theme="fame-lavender"] .mg-content .el-descriptions__cell.is-bordered-content {
|
||
background: #fff !important;
|
||
color: #303133 !important;
|
||
border-color: #ebe5f4 !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-descriptions__title { color: #2d1b69 !important; }
|
||
|
||
/* el-alert / collapse / radio / checkbox 浅化 */
|
||
:root[data-theme="fame-lavender"] .mg-content .el-alert {
|
||
background: #faf7fd !important;
|
||
border: 1px solid #ebe5f4 !important;
|
||
color: #303133 !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-alert__title,
|
||
:root[data-theme="fame-lavender"] .mg-content .el-alert__description { color: #303133 !important; }
|
||
|
||
:root[data-theme="fame-lavender"] .mg-content .el-collapse {
|
||
border-color: #ebe5f4 !important;
|
||
--el-collapse-header-text-color: #2d1b69;
|
||
--el-collapse-content-text-color: #303133;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-collapse-item__header,
|
||
:root[data-theme="fame-lavender"] .mg-content .el-collapse-item__wrap {
|
||
background: #fff !important;
|
||
border-color: #ebe5f4 !important;
|
||
color: #303133 !important;
|
||
}
|
||
|
||
:root[data-theme="fame-lavender"] .mg-content .el-radio__label,
|
||
:root[data-theme="fame-lavender"] .mg-content .el-checkbox__label { color: #303133 !important; }
|
||
:root[data-theme="fame-lavender"] .mg-content .el-radio__inner,
|
||
:root[data-theme="fame-lavender"] .mg-content .el-checkbox__inner {
|
||
background: #fff !important;
|
||
border-color: #c4b5fd !important;
|
||
}
|
||
|
||
:root[data-theme="fame-lavender"] .mg-content .el-radio-button__inner {
|
||
background: #fff !important;
|
||
border-color: #ddd6fe !important;
|
||
color: #5b21b6 !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-radio-button.is-active .el-radio-button__inner {
|
||
background: #7c3aed !important;
|
||
border-color: #7c3aed !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
/* el-button--primary：紫色稳重 + 高对比白字（去霓虹动画） */
|
||
:root[data-theme="fame-lavender"] .el-button--primary {
|
||
background: #7c3aed !important;
|
||
border: 1px solid #7c3aed !important;
|
||
color: #ffffff !important;
|
||
font-weight: 600;
|
||
box-shadow:
|
||
0 1px 2px rgba(45, 27, 105, 0.08),
|
||
0 2px 6px rgba(124, 58, 237, 0.22) !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .el-button--primary::after { display: none !important; }
|
||
:root[data-theme="fame-lavender"] .el-button--primary:hover {
|
||
background: #6d28d9 !important;
|
||
border-color: #6d28d9 !important;
|
||
box-shadow:
|
||
0 2px 6px rgba(45, 27, 105, 0.12),
|
||
0 4px 14px rgba(124, 58, 237, 0.32) !important;
|
||
transform: translateY(-1px) !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .el-button--primary:active {
|
||
background: #5b21b6 !important;
|
||
border-color: #5b21b6 !important;
|
||
transform: translateY(0) !important;
|
||
}
|
||
|
||
/* default 按钮：白底紫描边 + hover 浅紫底 */
|
||
:root[data-theme="fame-lavender"] .mg-content .el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--text) {
|
||
background: #ffffff !important;
|
||
border-color: #ddd6fe !important;
|
||
color: #5b21b6 !important;
|
||
font-weight: 500;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--text):hover {
|
||
background: #f5f3ff !important;
|
||
border-color: #a78bfa !important;
|
||
color: #5b21b6 !important;
|
||
box-shadow: 0 2px 6px rgba(124, 58, 237, 0.10) !important;
|
||
}
|
||
|
||
/* el-progress */
|
||
:root[data-theme="fame-lavender"] .mg-content .el-progress-bar__outer { background: #ede9fe !important; }
|
||
:root[data-theme="fame-lavender"] .mg-content .el-progress-bar__inner {
|
||
background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%) !important;
|
||
}
|
||
|
||
/* el-pagination 浅化 */
|
||
:root[data-theme="fame-lavender"] .mg-content .el-pagination {
|
||
--el-pagination-bg-color: #fff;
|
||
--el-pagination-button-bg-color: #faf7fd;
|
||
--el-pagination-button-color: #2d1b69;
|
||
--el-pagination-hover-color: #7c3aed;
|
||
color: #606266 !important;
|
||
}
|
||
|
||
/* el-dropdown 菜单 浅化（影响 header 用户菜单） */
|
||
:root[data-theme="fame-lavender"] .el-dropdown-menu {
|
||
background: #fff !important;
|
||
backdrop-filter: none !important;
|
||
border: 1px solid #ebe5f4 !important;
|
||
box-shadow: 0 6px 16px rgba(45, 27, 105, 0.10) !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .el-dropdown-menu__item {
|
||
color: #303133 !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .el-dropdown-menu__item:hover {
|
||
background: #f5f3ff !important;
|
||
color: #7c3aed !important;
|
||
}
|
||
|
||
/* el-switch */
|
||
:root[data-theme="fame-lavender"] .mg-content .el-switch.is-checked .el-switch__core {
|
||
background: #7c3aed !important;
|
||
border-color: #7c3aed !important;
|
||
}
|
||
|
||
/* el-dialog 上的 h2 */
|
||
:root[data-theme="fame-lavender"] .el-dialog h2 { color: #2d1b69 !important; }
|
||
:root[data-theme="fame-lavender"] .el-dialog { background: #fff !important; }
|
||
:root[data-theme="fame-lavender"] .el-dialog__title { color: #2d1b69 !important; }
|
||
:root[data-theme="fame-lavender"] .el-dialog__body { color: #303133 !important; }
|
||
|
||
/* 滚动条：紫色半透明（与 FAME 一致） */
|
||
:root[data-theme="fame-lavender"] ::-webkit-scrollbar-thumb {
|
||
background: rgba(124, 58, 237, 0.25);
|
||
}
|
||
:root[data-theme="fame-lavender"] ::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(124, 58, 237, 0.45);
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════════════
|
||
* 通用工具类（基于 design-system tokens · 见 design-system/MASTER.md）
|
||
* ════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* 等宽数字：KPI 数值 / 坐标 / ID / 时间戳 */
|
||
.mg-mono,
|
||
.mg-num {
|
||
font-family: var(--mg-font-mono);
|
||
font-variant-numeric: tabular-nums;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
/* 状态徽章（pill 样式，胶囊状） */
|
||
.mg-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 2px 8px;
|
||
border-radius: 999px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.3px;
|
||
border: 1px solid transparent;
|
||
white-space: nowrap;
|
||
}
|
||
.mg-pill.is-success {
|
||
background: rgba(var(--mg-status-success-rgb), 0.15);
|
||
color: var(--mg-status-success);
|
||
border-color: rgba(var(--mg-status-success-rgb), 0.40);
|
||
}
|
||
.mg-pill.is-warning {
|
||
background: rgba(var(--mg-status-warning-rgb), 0.15);
|
||
color: var(--mg-status-warning);
|
||
border-color: rgba(var(--mg-status-warning-rgb), 0.40);
|
||
}
|
||
.mg-pill.is-danger {
|
||
background: rgba(var(--mg-status-danger-rgb), 0.15);
|
||
color: var(--mg-status-danger);
|
||
border-color: rgba(var(--mg-status-danger-rgb), 0.40);
|
||
}
|
||
.mg-pill.is-info {
|
||
background: rgba(var(--mg-status-info-rgb), 0.15);
|
||
color: var(--mg-status-info);
|
||
border-color: rgba(var(--mg-status-info-rgb), 0.40);
|
||
}
|
||
.mg-pill.is-idle {
|
||
background: rgba(var(--mg-status-idle-rgb), 0.15);
|
||
color: var(--mg-status-idle);
|
||
border-color: rgba(var(--mg-status-idle-rgb), 0.40);
|
||
}
|
||
|
||
/* 实时脉动指示点：<span class="mg-live-dot is-success"/> */
|
||
.mg-live-dot {
|
||
display: inline-block;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--mg-status-info);
|
||
position: relative;
|
||
}
|
||
.mg-live-dot::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -4px;
|
||
border-radius: 50%;
|
||
border: 2px solid currentColor;
|
||
opacity: 0;
|
||
animation: mg-live-pulse 1.6s ease-out infinite;
|
||
}
|
||
.mg-live-dot.is-success { background: var(--mg-status-success); color: var(--mg-status-success); }
|
||
.mg-live-dot.is-warning { background: var(--mg-status-warning); color: var(--mg-status-warning); }
|
||
.mg-live-dot.is-danger { background: var(--mg-status-danger); color: var(--mg-status-danger); }
|
||
.mg-live-dot.is-info { background: var(--mg-status-info); color: var(--mg-status-info); }
|
||
.mg-live-dot.is-idle { background: var(--mg-status-idle); color: var(--mg-status-idle); }
|
||
.mg-live-dot.is-idle::after { animation: none; }
|
||
|
||
@keyframes mg-live-pulse {
|
||
0% { transform: scale(0.6); opacity: 0.55; }
|
||
70% { transform: scale(1.5); opacity: 0; }
|
||
100% { transform: scale(1.8); opacity: 0; }
|
||
}
|
||
|
||
/* 尊重用户的减少动画偏好 */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.mg-live-dot::after { animation: none; }
|
||
.bg-orb,
|
||
.hero-orb,
|
||
.hero-scene .agv-1,
|
||
.hero-scene .agv-2,
|
||
.hero-scene .float-data { animation: none !important; }
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────────────────
|
||
* fame-lavender 下 ReflectionManagerPanel 自定义按钮反差修复
|
||
*
|
||
* 问题：组件 scoped css 把 .method-btn / .header-action-btn / .add-field-btn 写成
|
||
* 「半透明紫底 + 白字」(rgba(170,110,250,0.30) 衬 #fff)，本来是给星云紫深底主题设计的。
|
||
* fame-lavender 切到白色卡片底后，半透明紫直接糊在白底 → 浅紫；白字糊在浅紫
|
||
* → 对比度 ~1.5:1，"动作 / 方法" 区按钮文字几乎不可见（见会话 N+3 用户反馈截图）。
|
||
*
|
||
* 策略：与 fame-lavender 下 .el-button--primary 保持一致 ——
|
||
* 实色 #7c3aed 紫底 + #ffffff 白字 + 紫色双层阴影，对比度 ~6.9:1（WCAG AA 通过）。
|
||
* 「+ 添加字段」(.add-field-btn) 偏次要等级，改为白底紫描边紫字（与 default 按钮一致）。
|
||
*
|
||
* 特异性：:root[data-theme] .mg-content .x = (0,3,0)，加 !important 足以压过 Vue
|
||
* scoped css 的 .x[data-v-xxx] = (0,2,0)。
|
||
* ───────────────────────────────────────────────────────────────────────── */
|
||
:root[data-theme="fame-lavender"] .mg-content .method-btn,
|
||
:root[data-theme="fame-lavender"] .mg-content .header-action-btn {
|
||
background: #7c3aed !important;
|
||
border: 1px solid #7c3aed !important;
|
||
color: #ffffff !important;
|
||
font-weight: 600 !important;
|
||
box-shadow:
|
||
0 1px 2px rgba(45, 27, 105, 0.08),
|
||
0 2px 6px rgba(124, 58, 237, 0.22) !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .method-btn:hover:not(:disabled),
|
||
:root[data-theme="fame-lavender"] .mg-content .header-action-btn:hover {
|
||
background: #6d28d9 !important;
|
||
border-color: #6d28d9 !important;
|
||
color: #ffffff !important;
|
||
box-shadow:
|
||
0 2px 6px rgba(45, 27, 105, 0.12),
|
||
0 4px 14px rgba(124, 58, 237, 0.32) !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .method-btn:active:not(:disabled) {
|
||
background: #5b21b6 !important;
|
||
border-color: #5b21b6 !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .method-btn:disabled {
|
||
background: #c4b5fd !important;
|
||
border-color: #c4b5fd !important;
|
||
color: #ffffff !important;
|
||
box-shadow: none !important;
|
||
opacity: 0.85 !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .method-btn .method-btn-icon,
|
||
:root[data-theme="fame-lavender"] .mg-content .method-btn .method-btn-spin {
|
||
color: rgba(255, 255, 255, 0.92) !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .method-btn .method-btn-tag {
|
||
background: rgba(255, 255, 255, 0.24) !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/* 「+ 添加字段」次级按钮：与 default 按钮同视觉等级（白底紫描边紫字），避免与 primary 等高。 */
|
||
:root[data-theme="fame-lavender"] .mg-content .add-field-btn {
|
||
background: #ffffff !important;
|
||
border: 1px dashed #a78bfa !important;
|
||
color: #5b21b6 !important;
|
||
font-weight: 500 !important;
|
||
}
|
||
:root[data-theme="fame-lavender"] .mg-content .add-field-btn:hover {
|
||
background: #f5f3ff !important;
|
||
border-color: #7c3aed !important;
|
||
color: #5b21b6 !important;
|
||
}
|