@charset "UTF-8"; /* ============================================================================ * QiHao-CRM · Liquid Glass Theme v1 * 风格：macOS 27 浅色彩色毛玻璃（Aurora Dome + 三档玻璃） * 依据：VISUAL-SPEC.md v1.0 / UX-SPEC.md v1.0 * 部署：/app/static/assets/theme-glass.css 由 index.html 引入 * 维护：宿主机执行 /opt/1panel/apps/cordys-crm/theme/apply-glass-theme.sh 重新注入 * ---------------------------------------------------------------------------- * 关键设计约束（改动前请先读，违反任一条都会重演旧深色主题的失败）： * 1) Cordys + Naive UI 的着色走「内联 CSS 变量」，属性级 !important 不够。 * 必须三层覆盖：L1 令牌重指向(html:root) → L2 --n-* 变量改指 → L3 属性级。 * 2) 表格必须实色、行分隔必须可见、表格内部 0 个 backdrop-filter。 * 严禁对表格容器/单元格打 transparent 背景（行边界会消失，见 VISUAL-SPEC §8.2）。 * 3) 同屏 backdrop-filter 预算：结构件 3（侧栏/顶栏/内容板）+ 浮层 ≤4。 * 不在滚动容器、表格、表单项上铺 blur。 * 4) 浅色主题必须 color-scheme: light（影响原生滚动条/日期/自动填充）。 * 5) 文字一律石墨蓝墨，禁止白字压玻璃，禁止低对比霓虹色作文字。 * ==========================================================================*/ /* ========================================================================== 1. L1 设计令牌（html:root 提高特异性，压过 JS 后注入的 :root） ========================================================================== */ html:root { /* ---- 底 ---- */ --q-canvas: #EFF2F8; /* L0 页面最底层兜底 */ --q-plate: rgba(250, 252, 255, .82); /* L2 内容板薄雾（允许 .80–.90） */ --q-surface: #FFFFFF; /* 表格行 / 输入框 / 正文容器实底 */ --q-inset: #F4F7FC; /* 内凹面：表头 / 代码块 / hover 面 */ /* ---- 墨（石墨冷调，不用纯黑） ---- */ --q-ink-1: #1A1D24; --q-ink-2: #3F4756; --q-ink-3: #525A68; --q-ink-4: #8B94A5; --q-ink-5: #B4BBC7; --q-hairline: rgba(16, 24, 40, .08); --q-hairline-strong: rgba(16, 24, 40, .14); /* ---- 主强调 Azure（青色只留在极光与 Logo 里） ---- */ --q-primary: #0A74AE; --q-primary-hover: #0B7CB8; --q-primary-active: #086496; --q-primary-text: #0A6A9E; --q-primary-tint: #E8F3FB; --q-primary-tint2: #D8EAF7; --q-primary-glow: rgba(10, 116, 174, .18); /* ---- 状态色（沿用 Cordys 已校准的 0 级色） ---- */ --q-success: #0A7A46; --q-success-bg: #E5F9EF; --q-success-solid: #00A552; --q-warning: #8A5A00; --q-warning-bg: #FFF6E5; --q-warning-solid: #D98A00; --q-error: #C0271E; --q-error-bg: #FCEAE9; --q-error-solid: #C0271E; --q-info: #2B5FD9; --q-info-bg: #EBF1FF; --q-info-solid: #2B5FD9; /* ---- 三档玻璃（只允许这三档） ---- */ --q-g1-bg: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .58)); --q-g2-bg: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .62)); --q-g3-bg: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .74)); --q-g1-blur: blur(18px) saturate(160%); --q-g2-blur: blur(28px) saturate(180%) brightness(1.02); --q-g3-blur: blur(44px) saturate(190%) brightness(1.03); --q-g-border: 1px solid rgba(255, 255, 255, .70); --q-g-ring: 0 0 0 1px rgba(16, 24, 40, .06); --q-g-top: inset 0 1px 0 rgba(255, 255, 255, .95); --q-g-bottom: inset 0 -1px 0 rgba(16, 24, 40, .05); /* ---- 层级阴影 ---- */ --q-sh-card: 0 1px 2px rgba(17, 26, 48, .05), 0 8px 24px -12px rgba(17, 26, 48, .10); --q-sh-card-hover: 0 2px 6px rgba(17, 26, 48, .06), 0 16px 40px -16px rgba(17, 26, 48, .16); --q-sh-pop: 0 4px 10px rgba(17, 26, 48, .06), 0 20px 48px -12px rgba(17, 26, 48, .20); --q-sh-modal: 0 8px 16px rgba(17, 26, 48, .08), 0 40px 96px -24px rgba(17, 26, 48, .28); /* ---- 圆角（替换 Naive 默认 3px，这一项单独就能洗掉旧系统味） ---- */ --q-r-xs: 6px; --q-r-sm: 8px; --q-r-md: 12px; --q-r-lg: 16px; --q-r-xl: 22px; --q-r-pill: 999px; /* ---- 字体与动效 ---- */ --q-font: -apple-system, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif; --q-font-num: "SF Pro Display", -apple-system, "Inter", "Helvetica Neue", sans-serif; --q-ease: cubic-bezier(.32, .72, 0, 1); --q-ease-out: cubic-bezier(.25, .46, .45, .94); --q-d-hover: 120ms; --q-d-state: 180ms; --q-d-pop: 200ms; --q-d-modal: 320ms; /* ---- 噪点（3% 上限，仅结构件；不落在表格/表单上） ---- */ --q-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.028'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); /* ---- L0 极光穹顶（VISUAL-SPEC §5 方案 A；唯一允许高饱和的地方） ---- 调色只需要改下面 5 个变量，别去改 html 的 background 声明。 若整体彩度上调，必须按 §1.2 二选一把 --q-plate 提到 .88 以上。 */ --q-au-1: radial-gradient(1200px 900px at 12% -5%, rgba(143, 157, 255, .64), transparent 62%); --q-au-2: radial-gradient(1000px 800px at 80% -10%, rgba(96, 207, 248, .57), transparent 60%); --q-au-3: radial-gradient(900px 700px at 96% 62%, rgba(255, 153, 201, .43), transparent 62%); --q-au-4: radial-gradient(800px 600px at 26% 108%, rgba(131, 238, 201, .37), transparent 60%); /* 彩度旋钮：§5「若觉得还不够彩，只在侧栏与内容区交界处加 260px 青色小光斑 .22」 */ --q-au-5: radial-gradient(320px 680px at 1% 44%, rgba(107, 196, 255, .34), transparent 74%); --q-au-base: linear-gradient(180deg, rgba(255, 255, 255, .36) 0%, rgba(255, 255, 255, .70) 42%, rgba(255, 255, 255, .84) 100%); } /* ========================================================================== 2. L1 第二段：把 Cordys 业务令牌重指向玻璃体系 —— main.css 里 30 处引用 --primary-*、69 处引用 --text-n*， 只改 .page-content 不改令牌，就会留下「浅底 + 旧青绿残渣」。 ========================================================================== */ html:root { /* 主色阶：8=主色，0/1 深，5/6/7 浅 */ --primary-8: #0A74AE !important; --primary-0: #086496 !important; --primary-1: #0B7CB8 !important; --primary-2: #2C8DBF !important; --primary-3: #6FAFD0 !important; --primary-4: #B2E4E6 !important; --primary-5: #C9E3F4 !important; --primary-6: #D8EAF7 !important; --primary-7: #E8F3FB !important; /* 文字阶：统一为石墨冷调。--text-n9 保持实色（65 处当小表面底色用） */ --text-n0: #14171E !important; --text-n1: #1A1D24 !important; --text-n2: #3F4756 !important; --text-n3: #525A68 !important; --text-n4: #8B94A5 !important; --text-n5: #A0A8B7 !important; --text-n6: #B4BBC7 !important; --text-n7: rgba(16, 24, 40, .14) !important; --text-n8: rgba(16, 24, 40, .08) !important; --text-n9: #F4F7FC !important; --text-n10: #FFFFFF !important; /* 状态色：0 级可承载文字，*-red/green/yellow 仅用于色块/圆点 */ --error-0: var(--q-error) !important; --success-0: var(--q-success) !important; --warning-0: var(--q-warning) !important; --info-0: var(--q-info) !important; /* 圆角令牌（Cordys 组件库在用） */ --border-radius-mini: var(--q-r-xs) !important; --border-radius-small: var(--q-r-sm) !important; --border-radius-medium: var(--q-r-sm) !important; --border-radius-large: var(--q-r-lg) !important; } /* ========================================================================== 3. 全局基底：L0 极光穹顶（fixed，不随滚动）+ 浅色 color-scheme ========================================================================== */ html { color-scheme: light !important; background-color: var(--q-canvas) !important; background-image: var(--q-noise), var(--q-au-1), var(--q-au-2), var(--q-au-3), var(--q-au-4), var(--q-au-5), var(--q-au-base) !important; background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important; background-size: 160px 160px, auto, auto, auto, auto, auto, auto !important; background-attachment: fixed !important; background-position: 0 0 !important; } body { background: transparent !important; color: var(--q-ink-1) !important; font-family: var(--q-font) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* 数字排版：CRM 的体面感 80% 来自等宽数字 */ html body .n-data-table-td, html body .n-statistic, html body .crm-detail-desc-item, html body .crm-description-item-value, html body [class*="amount"], html body [class*="money"] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "kern" 1; } html body a { color: var(--q-primary-text); text-decoration-color: rgba(10, 106, 158, .35); transition: color var(--q-d-hover) var(--q-ease-out); } html body a:hover { color: var(--q-primary); text-decoration: underline; text-underline-offset: 2px; } /* 滚动条：track 透明，thumb 石墨 16% */ html body ::-webkit-scrollbar { width: 10px; height: 10px; } html body ::-webkit-scrollbar-track { background: transparent !important; } html body ::-webkit-scrollbar-thumb { background-color: rgba(16, 24, 40, .16) !important; border-radius: var(--q-r-pill) !important; border: 2px solid transparent; background-clip: content-box; } html body ::-webkit-scrollbar-thumb:hover { background-color: rgba(16, 24, 40, .26) !important; } html body ::-webkit-scrollbar-corner { background: transparent !important; } /* ========================================================================== 4. 骨架：容器全部透明，只让极光在空白处透出 —— 旧主题把 .n-layout* 刷成深色是整站变黑板的原因，这里反过来：全透明 ========================================================================== */ html body .default-layout, html body .n-layout, html body .n-layout-content, html body .n-layout-scroll-container, html body .n-layout-footer, html body .n-layout-sider-scroll-container { background: transparent !important; background-color: transparent !important; color: var(--q-ink-1) !important; } html body .default-layout { position: relative; } /* ---- L1 结构层：侧栏 G2 玻璃 ---- */ html body .crm-layout-sider, html body .n-layout-sider { background-image: var(--q-noise), var(--q-g2-bg) !important; background-size: 160px 160px, auto !important; background-color: transparent !important; -webkit-backdrop-filter: var(--q-g2-blur) !important; backdrop-filter: var(--q-g2-blur) !important; border-right: 1px solid rgba(255, 255, 255, .55) !important; box-shadow: 1px 0 0 rgba(16, 24, 40, .06), inset -1px 0 0 rgba(16, 24, 40, .05) !important; color: var(--q-ink-1) !important; } html body .crm-layout-sider .n-divider:not(.n-divider--vertical) { border-color: var(--q-hairline) !important; } /* 启昊塑胶圆形品牌标（侧栏/顶栏），覆盖旧 130×28 文字标尺寸，保持正圆不拉伸 */ html body .crm-layout-sider img[src*="logo"], html body .n-layout-sider img[src*="logo"], html body .n-layout-header img[src*="logo"], html body img[src*="logo_CORDYS"], html body img[src*="/logo.svg"], html body img[src*="favicon.svg"] { width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; object-fit: contain !important; border-radius: 50% !important; filter: drop-shadow(0 3px 8px rgba(26, 42, 100, .18)) !important; } /* 顶栏 logo 实际是内嵌 SVG symbol（icon-logo_CORDYS），图片替换无法覆盖： 用 :has() 选中该图标，隐藏旧 symbol，再把新圆形品牌标作为 SVG 背景显示。 尺寸必须 22px，兼容 28px 顶栏与 22px 小面板，过大可被父容器裁成横条。 */ html body svg:has(use[href="#icon-logo_CORDYS"]), html body svg:has(use[xlink\:href="#icon-logo_CORDYS"]), html body svg:has(use[href="#icon-CORDYS"]), html body svg:has(use[xlink\:href="#icon-CORDYS"]) { width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; background-image: url("/images/logo_CORDYS.svg") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; border-radius: 50% !important; overflow: visible !important; filter: drop-shadow(0 3px 8px rgba(26, 42, 100, .18)) !important; } html body svg:has(use[href="#icon-logo_CORDYS"]) *, html body svg:has(use[xlink\:href="#icon-logo_CORDYS"]) *, html body svg:has(use[href="#icon-CORDYS"]) *, html body svg:has(use[xlink\:href="#icon-CORDYS"]) * { opacity: 0 !important; } /* 主界面左上角 logo 放大一倍：22px → 44px。小面板 logo 仍保持 22px。 */ html body .crm-layout-sider img[src*="logo"], html body .n-layout-sider img[src*="logo"], html body .n-layout-header img[src*="logo"] { width: 44px !important; height: 44px !important; max-width: 44px !important; max-height: 44px !important; } html body .crm-layout-sider svg:has(use[href="#icon-logo_CORDYS"]), html body .crm-layout-sider svg:has(use[xlink\:href="#icon-logo_CORDYS"]), html body .crm-layout-sider svg:has(use[href="#icon-CORDYS"]), html body .crm-layout-sider svg:has(use[xlink\:href="#icon-CORDYS"]), html body .n-layout-sider svg:has(use[href="#icon-logo_CORDYS"]), html body .n-layout-sider svg:has(use[xlink\:href="#icon-logo_CORDYS"]), html body .n-layout-header svg:has(use[href="#icon-logo_CORDYS"]), html body .n-layout-header svg:has(use[xlink\:href="#icon-logo_CORDYS"]) { width: 44px !important; height: 44px !important; max-width: 44px !important; max-height: 44px !important; } /* ---- L1 结构层：顶栏 G1 玻璃 ---- */ html body .n-layout-header { background-image: var(--q-noise), var(--q-g1-bg) !important; background-size: 160px 160px, auto !important; background-color: transparent !important; -webkit-backdrop-filter: var(--q-g1-blur) !important; backdrop-filter: var(--q-g1-blur) !important; border-bottom: 1px solid var(--q-hairline) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95) !important; color: var(--q-ink-1) !important; } /* 顶栏若未使用 n-layout-header（Cordys 自绘），用顶部菜单行反查其父容器兜底。 仅在支持 :has() 的浏览器生效，不生效时顶栏保持透明，不会破版。 */ @supports selector(:has(*)) { html body .default-layout .n-layout-scroll-container > div:has(> [class~="px-[16px]"][class~="justify-between"][class~="flex-1"]) { background-image: var(--q-noise), var(--q-g1-bg) !important; background-size: 160px 160px, auto !important; background-color: transparent !important; -webkit-backdrop-filter: var(--q-g1-blur) !important; backdrop-filter: var(--q-g1-blur) !important; border-bottom: 1px solid var(--q-hairline) !important; } } /* ---- L2 内容层：.page-content 就是内容板，结构已存在，只补材质 ---- ⚠ 这一条是本主题能否看到效果的总开关： 原值 background-color:var(--text-n9) 不透明，会把极光 100% 遮死。 绝对不要改成「给 --text-n9 加 alpha」——它有 65 处当小表面底色用。 ⚠ 不加 backdrop-filter（UX-SPEC §2.0 修订 + §5.1 验收项）： 板子背后只有平滑极光渐变，模糊它不产生任何视觉变化（ΔE < 0.5）， 却会为 position:fixed 后代建立包含块，副作用大于收益。 `.page-content` 的 computed backdrop-filter 必须为 none。 ⚠ padding 必须显式保住 16px：L2.5 覆盖时最容易漏写这一条导致留白丢失。 */ html body .page-content { background-color: var(--q-plate) !important; background-image: none !important; padding: 16px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55) !important; color: var(--q-ink-1) !important; } /* 全屏表单布局（full-page-layout）也带 .page-content 的 scoped 变体 */ html body .page-content[data-v-7cb3d8ae] { background-color: var(--q-plate) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ========================================================================== 5. 导航 ========================================================================== */ html body .n-menu { background-color: transparent !important; } html body .n-menu .n-menu-item-content { border-radius: var(--q-r-sm) !important; color: var(--q-ink-2) !important; font-weight: 500; transition: background-color var(--q-d-hover) var(--q-ease-out), color var(--q-d-hover) var(--q-ease-out) !important; } html body .n-menu .n-menu-item-content-header, html body .n-menu .n-menu-item-content-header a, html body .n-menu .n-menu-item-content__icon { color: inherit !important; } html body .n-menu .n-menu-item-content__icon { color: var(--q-ink-3) !important; transition: color var(--q-d-hover) var(--q-ease-out) !important; } /* hover：纯色，不模糊、不位移（玻璃不嵌套红线） */ html body .n-menu .n-menu-item-content:hover { background-color: rgba(16, 24, 40, .045) !important; color: var(--q-ink-1) !important; } html body .n-menu .n-menu-item-content:hover .n-menu-item-content__icon { color: var(--q-ink-2) !important; } /* 选中：浅 azure 底 + 强调色文字，左侧 3px 竖条用位置而非色相标记 */ html body .n-menu .n-menu-item-content--selected, html body .n-menu .n-menu-item-content--child-active { background-color: var(--q-primary-tint) !important; color: var(--q-primary-text) !important; } html body .n-menu .n-menu-item-content--selected .n-menu-item-content-header, html body .n-menu .n-menu-item-content--selected .n-menu-item-content-header a, html body .n-menu .n-menu-item-content--selected .n-menu-item-content__icon, html body .n-menu .n-menu-item-content--child-active .n-menu-item-content__icon { color: var(--q-primary-text) !important; } html body .n-menu .n-menu-item-content::before { background-color: transparent !important; border-radius: var(--q-r-sm) !important; transition: background-color var(--q-d-hover) var(--q-ease-out) !important; } html body .n-menu .n-menu-item-content--selected::after { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 16px; margin-top: -8px; border-radius: var(--q-r-pill); background-color: var(--q-primary); pointer-events: none; } html body .n-menu-item-content--selected { position: relative; } /* 顶部二级菜单（项高 32px 沿用，selected 由 --primary-7 驱动，此处补齐文字与圆角） */ html body .crm-top-menu.n-menu .n-menu-item-content { color: var(--q-ink-2) !important; font-size: 14px !important; } html body .crm-top-menu.n-menu .n-menu-item-content-header, html body .crm-top-menu.n-menu .n-menu-item-content-header a { font-size: 14px !important; } html body .crm-top-menu.n-menu .n-menu-item-content:hover { background-color: rgba(16, 24, 40, .045) !important; color: var(--q-ink-1) !important; } html body .crm-top-menu.n-menu .n-menu-item.crm-top-menu-selected-item { background-color: var(--q-primary-tint) !important; border-radius: var(--q-r-sm) !important; } html body .crm-top-menu.n-menu .n-menu-item.crm-top-menu-selected-item .n-menu-item-content, html body .crm-top-menu.n-menu .n-menu-item.crm-top-menu-selected-item .n-menu-item-content-header { color: var(--q-primary-text) !important; } /* 个人菜单 / 顶栏右侧 */ html body .personal-menu .n-menu-item-content .n-menu-item-content-header { color: var(--q-ink-2) !important; } html body .personal-popover { background-color: transparent !important; } html body .personal-name { color: var(--q-ink-1) !important; } /* 面包屑 */ html body .n-breadcrumb { font-size: 12px; } html body .n-breadcrumb-item__link { color: var(--q-ink-3) !important; font-weight: 400; transition: color var(--q-d-hover) var(--q-ease-out) !important; } html body .n-breadcrumb-item__link:hover { color: var(--q-primary-text) !important; } html body .n-breadcrumb-item__link--active, html body .n-breadcrumb-item:last-child .n-breadcrumb-item__link { color: var(--q-ink-1) !important; font-weight: 500; } html body .n-breadcrumb-item__separator { color: var(--q-ink-5) !important; } /* ========================================================================== 6. 容器：卡片 / 详情卡 / 分割线 / 折叠 / 描述列表 ========================================================================== */ html body .n-card { --n-color: var(--q-surface) !important; --n-text-color: var(--q-ink-2) !important; --n-title-text-color: var(--q-ink-1) !important; --n-border-color: var(--q-hairline) !important; --n-border-radius: var(--q-r-lg) !important; --n-box-shadow: var(--q-sh-card) !important; --n-color-modal: var(--q-surface) !important; --n-color-popover: var(--q-surface) !important; background-image: var(--q-g2-bg) !important; background-color: transparent !important; -webkit-backdrop-filter: var(--q-g2-blur) !important; backdrop-filter: var(--q-g2-blur) !important; border: var(--q-g-border) !important; border-radius: var(--q-r-lg) !important; box-shadow: var(--q-g-ring), var(--q-g-top), var(--q-g-bottom), var(--q-sh-card) !important; color: var(--q-ink-1) !important; transition: box-shadow var(--q-d-state) var(--q-ease), transform var(--q-d-state) var(--q-ease) !important; } html body .n-card > .n-card-header { border-bottom: 1px solid var(--q-hairline) !important; color: var(--q-ink-1) !important; } html body .n-card > .n-card-header .n-card-header__main { color: var(--q-ink-1) !important; font-weight: 600; } html body .n-card > .n-card-header .n-card-header__extra { color: var(--q-ink-3) !important; } html body .n-card > .n-card__content { color: var(--q-ink-1) !important; } /* 卡片内嵌卡片：不再叠玻璃，改近实色（避免 blur 嵌套） */ html body .n-card .n-card { background-image: none !important; background-color: rgba(255, 255, 255, .72) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 0 0 1px rgba(16, 24, 40, .06) !important; } /* 可点击卡片 hover：只上浮 1px + 阴影升级，禁止 scale */ html body .n-card.n-card--hoverable:hover { transform: translateY(-1px); box-shadow: var(--q-g-ring), var(--q-g-top), var(--q-sh-card-hover) !important; } /* 详情页摘要卡 */ html body .crm-detail-card { background-image: var(--q-g2-bg) !important; background-color: transparent !important; -webkit-backdrop-filter: var(--q-g2-blur) !important; backdrop-filter: var(--q-g2-blur) !important; border: var(--q-g-border) !important; border-radius: var(--q-r-lg) !important; box-shadow: var(--q-g-ring), var(--q-g-top), var(--q-sh-card) !important; color: var(--q-ink-1) !important; } html body .n-divider { border-color: var(--q-hairline) !important; background-color: var(--q-hairline) !important; } html body .n-divider:not(.n-divider--vertical) { border-top-color: var(--q-hairline) !important; background-color: transparent !important; } html body .n-divider__text { color: var(--q-ink-3) !important; background-color: transparent !important; } html body .n-collapse, html body .crm-collapse { background-color: transparent !important; border-color: var(--q-hairline) !important; } html body .n-collapse-item { border-color: var(--q-hairline) !important; } html body .n-collapse-item__header { color: var(--q-ink-1) !important; font-weight: 500; transition: background-color var(--q-d-hover) var(--q-ease-out) !important; } html body .n-collapse-item__header:hover { background-color: rgba(16, 24, 40, .03) !important; } html body .n-collapse-item__header-main, html body .crm-collapse-item-header-title { color: var(--q-ink-1) !important; font-weight: 500; } html body .n-collapse-item__content-inner { color: var(--q-ink-2) !important; } html body .n-collapse-item__arrow { color: var(--q-ink-3) !important; } html body .n-descriptions { background-color: transparent !important; } html body .n-descriptions-table, html body .n-descriptions-table-row, html body .n-descriptions-table-header, html body .n-descriptions-table-content { border-color: var(--q-hairline) !important; background-color: transparent !important; } html body .n-descriptions-item-label { color: var(--q-ink-3) !important; font-size: 13px; } html body .n-descriptions-item-content { color: var(--q-ink-1) !important; } /* 业务字段区 */ html body .crm-description { background-color: transparent !important; } html body .crm-description-item { border-color: var(--q-hairline) !important; } html body .crm-description-item-label { color: var(--q-ink-3) !important; font-size: 13px; font-weight: 400; } html body .crm-description-item-value { color: var(--q-ink-1) !important; } /* 行内编辑 */ html body .crm-editable-text-view { color: var(--q-ink-1) !important; border-radius: var(--q-r-xs) !important; transition: background-color var(--q-d-hover) var(--q-ease-out) !important; } html body .crm-editable-text-view:hover { background-color: rgba(10, 116, 174, .06) !important; box-shadow: 0 0 0 4px rgba(10, 116, 174, .06); } html body .crm-editable-text-input-wrap { border-radius: var(--q-r-xs) !important; } /* ========================================================================== 7. 表格（最高优先级：可读性一票否决） —— 全部实色；行分隔必须可见；表格内部 0 个 backdrop-filter ========================================================================== */ html body .n-data-table { --n-td-color: var(--q-surface) !important; --n-th-color: var(--q-inset) !important; --n-td-text-color: var(--q-ink-1) !important; --n-th-text-color: var(--q-ink-2) !important; --n-border-color: var(--q-hairline) !important; --n-td-color-hover: #F4F8FF !important; --n-td-color-striped: var(--q-surface) !important; --n-th-color-sort: var(--q-primary-tint) !important; --n-merged-td-color: var(--q-surface) !important; --n-merged-th-color: var(--q-inset) !important; --n-merged-td-text-color: var(--q-ink-1) !important; --n-merged-th-text-color: var(--q-ink-2) !important; --n-merged-border-color: var(--q-hairline) !important; --n-merged-td-color-hover: #F4F8FF !important; --n-merged-td-color-striped: var(--q-surface) !important; --n-merged-th-color-sort: var(--q-primary-tint) !important; --n-th-font-weight: 500 !important; background-color: var(--q-surface) !important; border-radius: var(--q-r-lg) !important; box-shadow: 0 0 0 1px var(--q-hairline) !important; color: var(--q-ink-1) !important; } /* 容器与滚动区：实色底 + 圆角裁切，禁止透明、禁止 blur */ html body .n-data-table-wrapper, html body .n-data-table-base-table, html body .n-data-table-base-table-body, html body .n-data-table-table { background-color: var(--q-surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body .n-data-table-wrapper { border-radius: var(--q-r-lg) !important; overflow: hidden; } /* 表头：近实色内凹面（不用透明） */ html body .n-data-table .n-data-table-th { background-color: var(--q-inset) !important; color: var(--q-ink-2) !important; font-weight: 500 !important; border-bottom: 1px solid var(--q-hairline) !important; border-color: var(--q-hairline) !important; } html body .n-data-table .n-data-table-th--sortable:hover, html body .n-data-table .n-data-table-th--filterable:hover { background-color: #EDF2F9 !important; } html body .n-data-table .n-data-table-th--sortable.n-data-table-th--sort-active, html body .n-data-table .n-data-table-th--sort-active { background-color: var(--q-primary-tint) !important; color: var(--q-primary-text) !important; } html body .n-data-table .n-data-table-th .n-data-table-sorter { color: var(--q-ink-4) !important; } html body .n-data-table .n-data-table-th--sort-active .n-data-table-sorter { color: var(--q-primary-text) !important; } /* 吸顶表头：靠实色解决，不用 blur。 实测 alpha .97 时 blur 开/关的最大通道差 6/255、差>10 的像素 0.00%（不可见）； blur 的视觉收益 ∝ (1 − alpha) × 背后纹理强度，alpha ≥ .95 时透光仅 3%，模糊等于没做。 定稿阈值：alpha ≤ .92 才考虑 blur，alpha ≥ .95 一律不加。 —— 这样「整张表格（含吸顶表头）backdrop-filter 计数 = 0」成为可直接断言的验收项。 */ html body .n-data-table .n-data-table-base-table-header { background-color: rgba(247, 250, 254, .97) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: inset 0 -1px 0 var(--q-hairline) !important; } /* 数据行 / 单元格：实底 + 可见行分隔 */ html body .n-data-table .n-data-table-td { background-color: var(--q-surface) !important; color: var(--q-ink-1) !important; border-bottom: 1px solid rgba(16, 24, 40, .07) !important; border-color: rgba(16, 24, 40, .07) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: background-color var(--q-d-hover) var(--q-ease-out) !important; } /* 行 hover：带蓝的浅色，只变底色，禁止位移/缩放 */ html body .n-data-table .n-data-table-tr:hover > .n-data-table-td { background-color: #F4F8FF !important; } /* 行选中 */ html body .n-data-table .n-data-table-tr--checked > .n-data-table-td, html body .n-data-table .n-data-table-tr--selected > .n-data-table-td { background-color: #EAF3FF !important; } /* 汇总行 */ html body .n-data-table .n-data-table-tr--summary > .n-data-table-td { background-color: #F7F9FD !important; color: var(--q-ink-1) !important; font-weight: 500 !important; } /* 弃用斑马纹（列多 + 细边线叠加会显脏） */ html body .n-data-table .n-data-table-tr--striped > .n-data-table-td { background-color: var(--q-surface) !important; } /* 固定列：不透明底 + 柔和分隔阴影 */ html body .n-data-table .n-data-table-td--fixed-left, html body .n-data-table .n-data-table-th--fixed-left { background-color: var(--q-surface) !important; } html body .n-data-table .n-data-table-th--fixed-left { background-color: var(--q-inset) !important; } html body .n-data-table .n-data-table-td--fixed-left, html body .n-data-table .n-data-table-th--fixed-left { box-shadow: 8px 0 16px -12px rgba(17, 26, 48, .20) !important; } html body .n-data-table .n-data-table-td--fixed-right, html body .n-data-table .n-data-table-th--fixed-right { background-color: var(--q-surface) !important; box-shadow: -8px 0 16px -12px rgba(17, 26, 48, .20) !important; } html body .n-data-table .n-data-table-th--fixed-right { background-color: var(--q-inset) !important; } /* 表格内空态 */ html body .n-data-table .n-data-table-empty { background-color: var(--q-surface) !important; color: var(--q-ink-3) !important; } /* 操作列文字按钮 */ html body .n-data-table .n-data-table-td .n-button--text-type, html body .n-data-table .n-data-table-td .btn-text-default { color: var(--q-primary-text) !important; border-radius: var(--q-r-xs) !important; background-color: transparent !important; } html body .n-data-table .n-data-table-td .n-button--text-type:hover, html body .n-data-table .n-data-table-td .btn-text-default:hover { background-color: rgba(10, 116, 174, .08) !important; } /* 客户名称等表格内跳转按钮：去掉蓝色实心底，退化为文字链接 */ html body .n-data-table .n-data-table-td .n-button:not(.n-button--text-type) { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; color: var(--q-primary-text) !important; padding: 0 2px !important; min-height: 20px !important; height: auto !important; } html body .n-data-table .n-data-table-td .n-button:not(.n-button--text-type):hover { background-color: rgba(10, 116, 174, .08) !important; border-radius: 4px !important; } /* 业务表格密度类：只改表面，不改行高（wrapper 本身不再铺任何底色） */ /* 7.x v11 表格内胶囊扁平化：客户列表等数据表里所有标签退化为纯文字 —— 只作用于 td 内部的标签元素，td 自身仍为实底（红线不碰）； 弹窗/筛选器等表格外的标签保持原胶囊外观 */ html body .n-data-table .n-data-table-td .n-tag { --n-color: transparent !important; --n-text-color: var(--q-ink-1) !important; --n-border: none !important; --n-border-radius: 0 !important; background-color: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; height: auto !important; line-height: inherit !important; font-weight: 400 !important; color: var(--q-ink-1) !important; } html body .n-data-table .n-data-table-td .n-tag .n-tag__border { border: none !important; background-color: transparent !important; box-shadow: none !important; } html body .n-data-table .n-data-table-td [class*="crm-tag"] { background-color: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; height: auto !important; font-weight: 400 !important; color: var(--q-ink-1) !important; } html body .n-data-table .n-data-table-td a { color: var(--q-primary-text) !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; height: auto !important; } /* 7.y 表格行统一为固定单行高度，避免名称链接/内部按钮把个别行撑高 */ html body .n-data-table .n-data-table-tr { height: 32px !important; max-height: 32px !important; } html body .n-data-table .n-data-table-td { height: 32px !important; max-height: 32px !important; padding: 0 12px !important; line-height: 32px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; vertical-align: middle !important; color: var(--q-ink-1) !important; } html body .n-data-table .n-data-table-td > * { margin-top: 0 !important; margin-bottom: 0 !important; vertical-align: middle !important; } /* 全表文字统一墨色；标签保持自身语义色 */ html body .n-data-table .n-data-table-td *:not(.n-tag):not([class*="crm-tag"]) { color: var(--q-ink-1) !important; } html body .n-data-table .n-data-table-td a, html body .n-data-table .n-data-table-td .n-button { color: var(--q-ink-1) !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; height: 22px !important; min-height: 22px !important; line-height: 22px !important; padding: 0 !important; margin: 0 !important; } html body .n-data-table .n-data-table-td a:hover, html body .n-data-table .n-data-table-td .n-button:hover { color: var(--q-primary-text) !important; background-color: transparent !important; text-decoration: underline !important; text-underline-offset: 2px !important; } html body .n-data-table .n-data-table-th { height: 34px !important; max-height: 34px !important; padding: 0 12px !important; line-height: 34px !important; white-space: nowrap !important; vertical-align: middle !important; } html body .n-data-table .n-data-table-td .n-tag { min-height: 18px !important; height: 18px !important; line-height: 18px !important; } html body .n-data-table .n-data-table-td .n-checkbox { vertical-align: middle !important; } /* 表头筛选浮层 */ html body .crm-table-filter-menu, html body .crm-table-column-setting-popover, html body .crm-tab-setting-popover, html body .crm-view-select-menu { color: var(--q-ink-1) !important; } html body .crm-table-filter-option { color: var(--q-ink-2) !important; border-radius: var(--q-r-sm) !important; transition: background-color var(--q-d-hover) var(--q-ease-out) !important; } html body .crm-table-filter-option:hover { background-color: rgba(10, 116, 174, .08) !important; } html body .crm-table-filter-footer { border-top: 1px solid var(--q-hairline) !important; } /* 商机看板卡：禁用玻璃，用实色 + hairline（同屏卡片常有 20+） */ html body .crm-stage-board-item { background-color: var(--q-surface) !important; background-image: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid var(--q-hairline) !important; border-radius: var(--q-r-md) !important; box-shadow: 0 1px 2px rgba(17, 26, 48, .05) !important; color: var(--q-ink-1) !important; transition: box-shadow var(--q-d-state) var(--q-ease-out) !important; } html body .crm-stage-board-item:hover { box-shadow: var(--q-sh-card) !important; } html body .crm-stage-board-item-desc-label { color: var(--q-ink-3) !important; } html body .crm-stage-board-item-desc-value { color: var(--q-ink-1) !important; } html body .crm-stage-board-item-ghost { opacity: .55 !important; transform: none !important; } /* ========================================================================== 8. 表单控件 ========================================================================== */ html body .n-input, html body .n-base-selection, html body .n-date-picker { --n-color: rgba(255, 255, 255, .86) !important; --n-color-focus: #FFFFFF !important; --n-text-color: var(--q-ink-1) !important; --n-placeholder-color: var(--q-ink-4) !important; --n-border: 1px solid var(--q-hairline-strong) !important; --n-border-hover: 1px solid rgba(16, 24, 40, .22) !important; --n-border-focus: 1px solid var(--q-primary) !important; --n-box-shadow-focus: 0 0 0 3px var(--q-primary-glow) !important; --n-border-radius: var(--q-r-sm) !important; --n-caret-color: var(--q-primary) !important; --n-border-error: 1px solid var(--q-error) !important; --n-border-focus-error: 1px solid var(--q-error) !important; --n-box-shadow-focus-error: 0 0 0 3px rgba(192, 39, 30, .14) !important; background-color: rgba(255, 255, 255, .86) !important; border-radius: var(--q-r-sm) !important; color: var(--q-ink-1) !important; transition: background-color var(--q-d-hover) var(--q-ease-out), box-shadow var(--q-d-hover) var(--q-ease-out) !important; } html body .n-input:hover, html body .n-base-selection:hover { background-color: rgba(255, 255, 255, .95) !important; } html body .n-input.n-input--focus, html body .n-base-selection.n-base-selection--focus { background-color: #FFFFFF !important; box-shadow: 0 0 0 3px var(--q-primary-glow) !important; } html body .n-input__input-el, html body .n-input__textarea-el, html body .n-base-selection-label, html body .n-base-selection-tags { background-color: transparent !important; color: var(--q-ink-1) !important; font-family: inherit; } html body .n-input__placeholder, html body .n-base-selection-placeholder, html body .n-input__input-el::placeholder, html body .n-input__textarea-el::placeholder { color: var(--q-ink-4) !important; } html body .n-input__border, html body .n-input__state-border, html body .n-base-selection__border, html body .n-base-selection__state-border { border-radius: var(--q-r-sm) !important; border-color: var(--q-hairline-strong) !important; } html body .n-input.n-input--focus .n-input__border, html body .n-input.n-input--focus .n-input__state-border, html body .n-base-selection.n-base-selection--focus .n-base-selection__state-border { border-color: var(--q-primary) !important; } html body .n-input.n-input--error .n-input__state-border, html body .n-base-selection.n-base-selection--error .n-base-selection__state-border { border-color: var(--q-error) !important; } html body .n-input--textarea .n-input-wrapper { border-radius: var(--q-r-md) !important; } html body .n-input__clear .n-base-clear { color: var(--q-ink-4) !important; } html body .n-input__suffix .n-icon, html body .n-base-selection__arrow .n-base-selection-input__icon { color: var(--q-ink-4) !important; } /* 复选 / 单选 / 开关 */ html body .n-checkbox { --n-border: 1px solid var(--q-hairline-strong) !important; --n-border-checked: 1px solid var(--q-primary) !important; --n-color-checked: var(--q-primary) !important; --n-check-mark-color: #FFFFFF !important; --n-border-radius: var(--q-r-xs) !important; --n-text-color: var(--q-ink-1) !important; } html body .n-checkbox .n-checkbox-box { background-color: var(--q-surface) !important; border-color: var(--q-hairline-strong) !important; border-radius: var(--q-r-xs) !important; } html body .n-checkbox .n-checkbox-box .n-checkbox-icon { color: #FFF !important; } html body .n-checkbox.n-checkbox--checked .n-checkbox-box { background-color: var(--q-primary) !important; border-color: var(--q-primary) !important; } html body .n-radio { --n-color: var(--q-surface) !important; --n-color-active: var(--q-primary) !important; --n-border: 1px solid var(--q-hairline-strong) !important; --n-border-active: 1px solid var(--q-primary) !important; --n-dot-color-active: #FFFFFF !important; --n-text-color: var(--q-ink-1) !important; } html body .n-radio .n-radio__dot { background-color: var(--q-surface) !important; box-shadow: inset 0 0 0 1px var(--q-hairline-strong) !important; } html body .n-radio.n-radio--checked .n-radio__dot { background-color: var(--q-primary) !important; box-shadow: inset 0 0 0 1px var(--q-primary), inset 0 0 0 4px var(--q-surface) !important; } html body .n-switch { --n-rail-color: rgba(16, 24, 40, .14) !important; --n-rail-color-active: var(--q-primary) !important; --n-button-color: #FFFFFF !important; --n-box-shadow: 0 1px 2px rgba(17, 26, 48, .20) !important; } /* 表单标签 / 反馈 */ html body .n-form-item-label { --n-label-text-color: var(--q-ink-2) !important; --n-asterisk-color: var(--q-error) !important; color: var(--q-ink-2) !important; font-weight: 500; } html body .n-form-item-label__asterisk { color: var(--q-error) !important; } html body .n-form-item-feedback { --n-feedback-text-color: var(--q-ink-3) !important; --n-feedback-text-color-error: var(--q-error) !important; color: var(--q-ink-3) !important; font-size: 12px; } html body .n-form-item-feedback.n-form-item-feedback--error { color: var(--q-error) !important; } html body .crm-form-create-item-desc { color: var(--q-ink-3) !important; } html body .crm-form-create-statistic { color: var(--q-ink-2) !important; } /* 日期面板 */ html body .n-date-panel { --n-color: #FFFFFF !important; --n-text-color: var(--q-ink-1) !important; --n-panel-header-text-color: var(--q-ink-1) !important; --n-cell-color: var(--q-surface) !important; --n-cell-color-hover: var(--q-primary-tint) !important; --n-cell-color-active: var(--q-primary) !important; --n-cell-color-in-range: var(--q-primary-tint) !important; --n-cell-text-color: var(--q-ink-1) !important; --n-cell-text-color-active: #FFFFFF !important; --n-cell-text-color-in-range: var(--q-primary-text) !important; --n-calendar-title-text-color: var(--q-ink-2) !important; --n-border-radius: var(--q-r-md) !important; background-color: #FFFFFF !important; color: var(--q-ink-1) !important; } /* ========================================================================== 9. 按钮（按类型分别映射，禁止一刀切 --n-color） ========================================================================== */ html body .n-button { --n-border-radius: 4px !important; border-radius: 4px !important; --n-font-size: 14px !important; font-family: inherit; transition: background-color var(--q-d-hover) var(--q-ease-out), border-color var(--q-d-hover) var(--q-ease-out), box-shadow var(--q-d-hover) var(--q-ease-out) !important; } /* 所有类型共用焦点环（键盘） */ html body .n-button:focus-visible, html body .n-button:focus { box-shadow: 0 0 0 3px var(--q-primary-glow) !important; outline: none !important; } /* Primary：玻璃描边按钮，不铺整块蓝色背景 */ html body .n-button.n-button--primary-type { --n-color: rgba(255, 255, 255, .58) !important; --n-color-hover: var(--q-primary-tint) !important; --n-color-pressed: var(--q-primary-tint2) !important; --n-color-focus: var(--q-primary-tint) !important; --n-text-color: var(--q-primary-text) !important; --n-text-color-hover: var(--q-primary-text) !important; --n-text-color-pressed: var(--q-primary-text) !important; --n-text-color-focus: var(--q-primary-text) !important; --n-border: 1px solid rgba(10, 116, 174, .32) !important; --n-border-hover: 1px solid rgba(10, 116, 174, .48) !important; --n-border-pressed: 1px solid rgba(10, 116, 174, .55) !important; --n-border-focus: 1px solid rgba(10, 116, 174, .48) !important; --n-ripple-color: rgba(10, 116, 174, .12) !important; background-color: rgba(255, 255, 255, .58) !important; color: var(--q-primary-text) !important; border: 1px solid rgba(10, 116, 174, .32) !important; box-shadow: 0 1px 2px rgba(17, 26, 48, .06), inset 0 1px 0 rgba(255, 255, 255, .92) !important; } html body .n-button.n-button--primary-type:not(.n-button--disabled):hover { background-color: var(--q-primary-tint) !important; border-color: rgba(10, 116, 174, .48) !important; } html body .n-button.n-button--primary-type:not(.n-button--disabled):active { background-color: var(--q-primary-tint2) !important; box-shadow: inset 0 1px 3px rgba(10, 70, 110, .10) !important; } /* Default：玻璃按钮 */ html body .n-button.n-button--default-type { --n-color: rgba(255, 255, 255, .78) !important; --n-color-hover: rgba(255, 255, 255, .92) !important; --n-color-pressed: rgba(255, 255, 255, .70) !important; --n-color-focus: rgba(255, 255, 255, .92) !important; --n-text-color: var(--q-ink-1) !important; --n-text-color-hover: var(--q-ink-1) !important; --n-text-color-pressed: var(--q-ink-1) !important; --n-border: 1px solid var(--q-hairline-strong) !important; --n-border-hover: 1px solid rgba(16, 24, 40, .20) !important; --n-border-pressed: 1px solid rgba(16, 24, 40, .20) !important; --n-ripple-color: rgba(16, 24, 40, .10) !important; box-shadow: 0 1px 2px rgba(17, 26, 48, .06), inset 0 1px 0 rgba(255, 255, 255, .9) !important; } /* Tertiary / 描边 */ html body .n-button.n-button--tertiary-type { --n-color: transparent !important; --n-color-hover: var(--q-primary-tint) !important; --n-color-pressed: var(--q-primary-tint2) !important; --n-text-color: var(--q-primary-text) !important; --n-text-color-hover: var(--q-primary-text) !important; --n-text-color-pressed: var(--q-primary-active) !important; --n-border: 1px solid rgba(10, 116, 174, .35) !important; --n-border-hover: 1px solid rgba(10, 116, 174, .55) !important; --n-border-pressed: 1px solid rgba(10, 116, 174, .55) !important; color: var(--q-primary-text) !important; } /* Text（纯文字/图标按钮）：只给底色与文字色，不动布局 */ html body .n-button.n-button--text-type { --n-color: transparent !important; --n-color-hover: rgba(16, 24, 40, .05) !important; --n-color-pressed: rgba(16, 24, 40, .09) !important; --n-text-color: var(--q-ink-2) !important; --n-text-color-hover: var(--q-ink-1) !important; --n-text-color-pressed: var(--q-ink-1) !important; --n-border: 1px solid transparent !important; color: var(--q-ink-2) !important; background-color: transparent !important; } html body .n-button.n-button--text-type:not(.n-button--disabled):hover { background-color: rgba(16, 24, 40, .05) !important; } html body .n-button.n-button--text-type.n-button--primary-type { color: var(--q-primary-text) !important; } /* Error / Danger */ html body .n-button.n-button--error-type:not(.n-button--text-type) { --n-color: var(--q-error) !important; --n-color-hover: #A82019 !important; --n-color-pressed: #8F1B15 !important; --n-text-color: #FFFFFF !important; --n-text-color-hover: #FFFFFF !important; --n-text-color-pressed: #FFFFFF !important; background-color: var(--q-error) !important; color: #FFFFFF !important; border: 1px solid transparent !important; box-shadow: 0 1px 2px rgba(120, 20, 16, .22), inset 0 1px 0 rgba(255, 255, 255, .14) !important; } /* 禁用态 */ html body .n-button.n-button--disabled { --n-color: rgba(16, 24, 40, .05) !important; --n-text-color: var(--q-ink-5) !important; --n-border: 1px solid var(--q-hairline) !important; background-color: rgba(16, 24, 40, .05) !important; color: var(--q-ink-5) !important; box-shadow: none !important; border: 1px solid var(--q-hairline) !important; } html body .crm-button-group .n-button { border-radius: 4px !important; } html body .n-button[class*="rounded"], html body button.n-button, html body a.n-button, html body .crm-button { border-radius: 4px !important; } html body .crm-clear-icon { color: var(--q-ink-4) !important; } html body .crm-clear-icon:hover { color: var(--q-ink-2) !important; } /* ========================================================================== 10. 浮层 L3：Modal / Drawer / Popover / Dropdown / Message / Tooltip —— 同一时刻最多 4 个 blur；第二层浮层由 Cordys 自己决定，本主题不再叠加 ========================================================================== */ html body .n-modal { --n-color: #FFFFFF !important; --n-text-color: var(--q-ink-1) !important; background-image: var(--q-noise), var(--q-g3-bg) !important; background-size: 160px 160px, auto !important; background-color: transparent !important; -webkit-backdrop-filter: var(--q-g3-blur) !important; backdrop-filter: var(--q-g3-blur) !important; border: var(--q-g-border) !important; border-radius: var(--q-r-xl) !important; box-shadow: var(--q-g-ring), var(--q-g-top), var(--q-sh-modal) !important; color: var(--q-ink-1) !important; } html body .n-dialog { --n-color: transparent !important; --n-text-color: var(--q-ink-1) !important; --n-title-text-color: var(--q-ink-1) !important; --n-border-radius: var(--q-r-xl) !important; background-color: transparent !important; color: var(--q-ink-1) !important; } html body .n-dialog__title { color: var(--q-ink-1) !important; font-weight: 600; } html body .n-dialog__content { color: var(--q-ink-2) !important; } html body .n-modal-mask { background-color: rgba(20, 28, 45, .32) !important; -webkit-backdrop-filter: blur(3px) !important; backdrop-filter: blur(3px) !important; } html body .n-drawer { --n-color: #FFFFFF !important; --n-text-color: var(--q-ink-1) !important; background-color: transparent !important; box-shadow: none !important; } html body .n-drawer .n-drawer-content { background-image: var(--q-noise), var(--q-g3-bg) !important; background-size: 160px 160px, auto !important; background-color: transparent !important; -webkit-backdrop-filter: var(--q-g3-blur) !important; backdrop-filter: var(--q-g3-blur) !important; border-radius: var(--q-r-xl) 0 0 var(--q-r-xl) !important; box-shadow: -24px 0 64px -24px rgba(17, 26, 48, .24), var(--q-g-top) !important; color: var(--q-ink-1) !important; } html body .n-drawer.n-drawer--left .n-drawer-content { border-radius: 0 var(--q-r-xl) var(--q-r-xl) 0 !important; box-shadow: 24px 0 64px -24px rgba(17, 26, 48, .24), var(--q-g-top) !important; } html body .n-drawer-header { border-bottom: 1px solid var(--q-hairline) !important; color: var(--q-ink-1) !important; } html body .n-drawer-header__main { color: var(--q-ink-1) !important; font-weight: 600; } html body .n-drawer-body-content-wrapper { background-color: transparent !important; color: var(--q-ink-1) !important; } html body .crm-drawer-header-class, html body .crm-form-drawer-header { border-bottom: 1px solid var(--q-hairline) !important; } html body .crm-form-drawer-title { color: var(--q-ink-1) !important; font-weight: 600; } /* 抽屉/表单吸底操作条：近实色、不加 blur。 吸底条是随滚动持续移动的元素，一旦加模糊就会每帧重算背景，是全站最高卡顿点； 而且它必须 opaque 才能挡住下方内容，blur 在这里同样是零收益。 */ html body .crm-form-create-footer { background-color: rgba(255, 255, 255, .92) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-top: 1px solid var(--q-hairline) !important; box-shadow: 0 -8px 24px -16px rgba(17, 26, 48, .18) !important; } html body .crm-drawer-content { background-color: transparent !important; } /* Popover / Tooltip / Dropdown / Select 菜单：统一 G3 */ html body .n-popover:not(.n-popover--raw), html body .n-tooltip, html body .n-dropdown-menu, html body .n-base-select-menu { --n-color: #FFFFFF !important; --n-text-color: var(--q-ink-1) !important; background-image: var(--q-g3-bg) !important; background-color: transparent !important; -webkit-backdrop-filter: var(--q-g3-blur) !important; backdrop-filter: var(--q-g3-blur) !important; border: var(--q-g-border) !important; border-radius: var(--q-r-md) !important; box-shadow: var(--q-g-ring), var(--q-g-top), var(--q-sh-pop) !important; color: var(--q-ink-1) !important; } html body .n-popover .n-popover__content { background-color: transparent !important; } html body .n-tooltip { padding: 4px 8px !important; } /* 下拉选项 */ html body .n-dropdown-option, html body .n-dropdown-option-body, html body .n-dropdown-option-body__label, html body .n-base-select-option__content { color: var(--q-ink-2) !important; border-radius: var(--q-r-sm) !important; transition: background-color var(--q-d-hover) var(--q-ease-out), color var(--q-d-hover) var(--q-ease-out) !important; } html body .n-dropdown-option-body::before, html body .n-base-select-option::before { border-radius: var(--q-r-sm) !important; } html body .n-dropdown-option-body:hover::before, html body .n-base-select-option:hover::before, html body .n-dropdown-option-body--pending::before, html body .n-base-select-option--pending::before { background-color: rgba(10, 116, 174, .08) !important; } html body .n-dropdown-option-body--pending .n-dropdown-option-body__label, html body .n-base-select-option--pending .n-base-select-option__content { color: var(--q-primary-text) !important; } html body .n-base-select-option--selected .n-base-select-option__content { color: var(--q-primary-text) !important; } html body .n-base-select-option__check { color: var(--q-primary) !important; } html body .n-dropdown-divider, html body .n-base-select-menu .n-divider { background-color: var(--q-hairline) !important; border-color: var(--q-hairline) !important; } html body .n-dropdown-menu .n-dropdown-option-body__prefix, html body .n-dropdown-menu .n-dropdown-option-body__suffix { color: var(--q-ink-3) !important; } html body .crm-dropdown, html body .crm-view-select-menu { background-color: transparent !important; } /* Message / Notification */ html body .n-message, html body .n-notification { --n-color: #FFFFFF !important; --n-text-color: var(--q-ink-1) !important; --n-box-shadow: var(--q-sh-pop) !important; background-image: var(--q-g3-bg) !important; background-color: transparent !important; -webkit-backdrop-filter: var(--q-g3-blur) !important; backdrop-filter: var(--q-g3-blur) !important; border: var(--q-g-border) !important; border-radius: var(--q-r-md) !important; box-shadow: var(--q-g-ring), var(--q-g-top), var(--q-sh-pop) !important; color: var(--q-ink-1) !important; } html body .n-message .n-message__content, html body .n-notification .n-notification-main__header { color: var(--q-ink-1) !important; } /* Popconfirm */ html body .crm-pop-confirm-wrapper, html body .crm-pop-confirm-content-wrapper { background-color: transparent !important; } html body .crm-pop-confirm-title { color: var(--q-ink-1) !important; font-weight: 600; } html body .crm-pop-confirm-content { color: var(--q-ink-2) !important; } /* ========================================================================== 11. 数据展示：Tag / 分页 / 空态 / 头像 / 进度 / 骨架 / Tab ========================================================================== */ html body .n-tag { --n-color: var(--q-inset) !important; --n-text-color: var(--q-ink-2) !important; --n-border: 1px solid var(--q-hairline) !important; --n-border-radius: 4px !important; border-radius: 4px !important; font-weight: 500; } /* Cordys 业务标签：浅色系（默认）/ 描边系 / 实心系 */ html body .crm-tag-light { border-radius: 4px !important; font-weight: 500; } html body .crm-tag-light--primary { background-color: var(--q-primary-tint) !important; color: var(--q-primary-text) !important; } html body .crm-tag-light--success { background-color: var(--q-success-bg) !important; color: var(--q-success) !important; } html body .crm-tag-light--warning { background-color: var(--q-warning-bg) !important; color: var(--q-warning) !important; } html body .crm-tag-light--error { background-color: var(--q-error-bg) !important; color: var(--q-error) !important; } html body .crm-tag-light--info { background-color: var(--q-info-bg) !important; color: var(--q-info) !important; } html body .crm-tag-light--default { background-color: var(--q-inset) !important; color: var(--q-ink-2) !important; } html body .crm-tag-outline, html body .crm-tag-lightOutLine { border-radius: 4px !important; background-color: transparent !important; font-weight: 500; } html body .crm-tag-outline--primary, html body .crm-tag-lightOutLine--primary { border: 1px solid rgba(10, 116, 174, .32) !important; color: var(--q-primary-text) !important; } html body .crm-tag-outline--success, html body .crm-tag-lightOutLine--success { border: 1px solid rgba(10, 122, 70, .32) !important; color: var(--q-success) !important; } html body .crm-tag-outline--warning, html body .crm-tag-lightOutLine--warning { border: 1px solid rgba(138, 90, 0, .32) !important; color: var(--q-warning) !important; } html body .crm-tag-outline--error, html body .crm-tag-lightOutLine--error { border: 1px solid rgba(192, 39, 30, .32) !important; color: var(--q-error) !important; } html body .crm-tag-outline--info, html body .crm-tag-lightOutLine--info { border: 1px solid rgba(43, 95, 217, .32) !important; color: var(--q-info) !important; } html body .crm-tag-outline--default, html body .crm-tag-lightOutLine--default { border: 1px solid var(--q-hairline-strong) !important; color: var(--q-ink-3) !important; } html body .crm-tag-dark { border-radius: 4px !important; color: #FFFFFF !important; font-weight: 500; } html body .crm-tag-dark--primary { background-color: var(--q-primary) !important; } html body .crm-tag-dark--success { background-color: var(--q-success-solid) !important; } html body .crm-tag-dark--warning { background-color: var(--q-warning-solid) !important; } html body .crm-tag-dark--error { background-color: var(--q-error-solid) !important; } html body .crm-tag-dark--info { background-color: var(--q-info-solid) !important; } html body .crm-tag-dark--default { background-color: var(--q-ink-3) !important; } /* 表格状态/标签组件：无论使用 n-tag、crm-tag 还是 rounded-full 自定义类，一律去胶囊 */ html body .n-data-table-td [class*="tag"], html body .n-data-table-td [class*="status"] > *, html body .crm-status-cell > *, html body .n-tag[class*="rounded"], html body .n-data-table-td .n-button { border-radius: 4px !important; } /* 计数徽标 */ html body .crm-overflow-tag-list, html body .crm-measure-tag-item { color: var(--q-ink-2) !important; } html body .crm-status-cell { color: var(--q-ink-1) !important; } /* 分页 */ html body .n-pagination { --n-item-color: transparent !important; --n-item-color-hover: rgba(16, 24, 40, .05) !important; --n-item-color-active: var(--q-primary) !important; --n-item-text-color: var(--q-ink-2) !important; --n-item-text-color-hover: var(--q-ink-1) !important; --n-item-text-color-active: #FFFFFF !important; --n-item-border: 1px solid transparent !important; --n-item-border-active: 1px solid transparent !important; --n-item-border-radius: var(--q-r-sm) !important; color: var(--q-ink-2) !important; } html body .n-pagination .n-pagination-item { border-radius: var(--q-r-sm) !important; transition: background-color var(--q-d-hover) var(--q-ease-out), color var(--q-d-hover) var(--q-ease-out) !important; } html body .n-pagination .n-pagination-item--active { background-color: var(--q-primary) !important; color: #FFFFFF !important; font-weight: 500; border-radius: var(--q-r-sm) !important; } html body .n-pagination .n-pagination-item--disabled { color: var(--q-ink-5) !important; } html body .n-pagination .n-pagination-quick-jumper { color: var(--q-ink-3) !important; } /* 空态：图形 + 主次文案，不加玻璃，直接落内容板 */ html body .n-empty { --n-icon-color: var(--q-ink-4) !important; --n-text-color: var(--q-ink-2) !important; --n-extra-text-color: var(--q-ink-4) !important; color: var(--q-ink-2) !important; } html body .n-empty .n-empty__icon { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--q-r-pill); background-image: radial-gradient(circle, rgba(10, 116, 174, .10), transparent 70%); color: var(--q-ink-4) !important; } html body .n-empty .n-empty__description { color: var(--q-ink-2) !important; font-size: 14px; } html body .n-empty .n-empty__extra { color: var(--q-ink-4) !important; font-size: 12px; } /* 头像 / 进度 / 骨架 */ html body .n-avatar { --n-color: var(--q-primary-tint) !important; --n-text-color: var(--q-primary-text) !important; --n-border: 1px solid rgba(255, 255, 255, .8) !important; background-color: var(--q-primary-tint) !important; color: var(--q-primary-text) !important; border-radius: var(--q-r-pill) !important; font-weight: 500; } html body .n-progress { --n-rail-color: rgba(16, 24, 40, .08) !important; --n-fill-color: var(--q-primary) !important; } html body .n-progress .n-progress-graph-line-rail { background-color: rgba(16, 24, 40, .08) !important; } html body .n-progress .n-progress-graph-line-fill { background-color: var(--q-primary) !important; } html body .n-skeleton { --n-color: rgba(16, 24, 40, .06) !important; --n-color-end: rgba(16, 24, 40, .03) !important; background-color: rgba(16, 24, 40, .06) !important; border-radius: var(--q-r-sm) !important; } /* Tab */ html body .n-tabs { --n-tab-text-color: var(--q-ink-3) !important; --n-tab-text-color-hover: var(--q-ink-1) !important; --n-tab-text-color-active: var(--q-ink-1) !important; --n-tab-text-color-disabled: var(--q-ink-5) !important; --n-bar-color: var(--q-primary) !important; --n-tab-font-size: 14px !important; --n-tab-font-weight: 400 !important; --n-tab-font-weight-active: 500 !important; --n-tab-color: transparent !important; --n-tab-color-active: #FFFFFF !important; --n-pane-text-color: var(--q-ink-1) !important; background-color: transparent !important; } html body .n-tabs .n-tabs-tab { color: var(--q-ink-3) !important; font-size: 14px !important; font-weight: 400; transition: color var(--q-d-hover) var(--q-ease-out) !important; } html body .n-tabs .n-tabs-tab .n-tabs-tab__label { font-size: 14px !important; } html body .n-tabs .n-tabs-tab:hover { color: var(--q-ink-1) !important; } html body .n-tabs .n-tabs-tab.n-tabs-tab--active { color: var(--q-ink-1) !important; font-weight: 500; } html body .n-tabs .n-tabs-bar { background-color: var(--q-primary) !important; border-radius: var(--q-r-pill) !important; height: 3px !important; } html body .n-tabs .n-tabs-nav-scroll-content, html body .n-tabs .n-tabs-nav::before { border-color: var(--q-hairline) !important; background-color: var(--q-hairline) !important; } /* 分段控件 */ html body .n-tabs.n-tabs--segment-type { --n-tab-color-active: #FFFFFF !important; } html body .n-tabs .n-tabs-rail, html body .n-tabs .n-tabs-capsule { background-color: rgba(16, 24, 40, .05) !important; border-radius: var(--q-r-pill) !important; } html body .n-tabs .n-tabs-tab.n-tabs-tab--active .n-tabs-tab__label { color: var(--q-ink-1) !important; } /* ========================================================================== 12. 业务专有：跟进记录 / 评论 / 审批流 / 上传 / 树 ========================================================================== */ html body .crm-follow-time-line { border-color: var(--q-hairline) !important; } html body .crm-follow-record-item { color: var(--q-ink-1) !important; border-color: var(--q-hairline) !important; transition: background-color var(--q-d-hover) var(--q-ease-out) !important; } html body .crm-follow-record-item:hover { background-color: rgba(16, 24, 40, .025) !important; } html body .crm-follow-record-title { color: var(--q-ink-1) !important; font-weight: 500; } html body .crm-follow-record-content { color: var(--q-ink-2) !important; } html body .crm-follow-record-method { color: var(--q-ink-3) !important; } html body .crm-follow-time-dot { background-color: var(--q-primary) !important; box-shadow: 0 0 0 3px rgba(10, 116, 174, .14) !important; } html body .crm-follow-dot-future { background-color: var(--q-ink-5) !important; box-shadow: none !important; } html body .crm-follow-detail { color: var(--q-ink-2) !important; } html body .crm-comment, html body .crm-comment-list { border-color: var(--q-hairline) !important; } html body .crm-comment-item { color: var(--q-ink-1) !important; border-radius: var(--q-r-md) !important; } html body .crm-comment-item--reply { background-color: var(--q-inset) !important; } html body .crm-comment-item__content { color: var(--q-ink-2) !important; } html body .crm-comment-list__divider, html body .crm-comment-list__reply-divider, html body .crm-comment__header-divider { border-color: var(--q-hairline) !important; } html body .crm-workflow-item { color: var(--q-ink-1) !important; } html body .crm-workflow-item-name { color: var(--q-ink-1) !important; font-weight: 500; } html body .crm-workflow-item-line { background-color: var(--q-hairline-strong) !important; } html body .crm-workflow-step { color: var(--q-ink-3) !important; } html body .crm-approver-avatar-list__name { color: var(--q-ink-2) !important; } html body .crm-approver-avatar-list__name--active { color: var(--q-primary-text) !important; } html body .crm-approval-popover, html body .crm-approval-popover__header { border-color: var(--q-hairline) !important; } html body .crm-approval-popover__title { color: var(--q-ink-1) !important; font-weight: 600; } /* 上传区：虚线用 hairline，hover 转主色 */ html body .crm-upload-area, html body .crm-upload-wrapper, html body .crm-upload-area-dotted-border { background-color: rgba(255, 255, 255, .72) !important; border-color: var(--q-hairline-strong) !important; border-radius: var(--q-r-md) !important; transition: border-color var(--q-d-hover) var(--q-ease-out), background-color var(--q-d-hover) var(--q-ease-out) !important; } html body .crm-upload-area:hover, html body .crm-upload-wrapper:hover { border-color: rgba(10, 116, 174, .45) !important; } html body .crm-upload-main-text { color: var(--q-ink-1) !important; font-weight: 500; } html body .crm-upload-sub-text { color: var(--q-ink-3) !important; } html body .crm-upload-icon-box { color: var(--q-primary-text) !important; } html body .crm-file-item { color: var(--q-ink-1) !important; border: 1px solid var(--q-hairline) !important; border-radius: var(--q-r-sm) !important; background-color: var(--q-surface) !important; } /* 树 / 列表 */ html body .crm-tree { color: var(--q-ink-1) !important; } html body .crm-tree-node-title { color: var(--q-ink-1) !important; } html body .crm-tree-node-title:hover { background-color: rgba(16, 24, 40, .045) !important; border-radius: var(--q-r-sm) !important; } html body .crm-tree-focus-node { background-color: var(--q-primary-tint) !important; color: var(--q-primary-text) !important; } html body .crm-tree-node-count, html body .crm-tree-node-extra { color: var(--q-ink-3) !important; } html body .crm-list, html body .crm-list-item { border-color: var(--q-hairline) !important; color: var(--q-ink-1) !important; } html body .crm-list-item--active { background-color: var(--q-primary-tint) !important; color: var(--q-primary-text) !important; } html body .crm-list-item:hover { background-color: rgba(16, 24, 40, .03) !important; } html body .crm-batch-edit-form, html body .crm-batch-edit-form-item { border-color: var(--q-hairline) !important; color: var(--q-ink-1) !important; } /* ========================================================================== 13. 可选的页面骨架钩子（UX-SPEC §8.2，供后续页面直接使用，当前不存在也不影响） ========================================================================== */ html body .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 4px 4px 12px; } /* 静态（不吸顶）工具条：背后只有极光，blur 零收益 → 只给半透明底，不加 blur */ html body .page-toolbar { background-color: rgba(255, 255, 255, .72) !important; background-image: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: var(--q-g-border) !important; border-radius: var(--q-r-lg) !important; box-shadow: var(--q-g-ring), var(--q-g-top) !important; } html body .page-body { background-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ========================================================================== 14. 降级：不支持 backdrop-filter 时全部转近实色，边光/阴影保留 ========================================================================== */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html body .crm-layout-sider, html body .n-layout-sider, html body .n-layout-header { background-image: none !important; background-color: rgba(255, 255, 255, .94) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body .page-content, html body .page-content[data-v-7cb3d8ae] { background-color: rgba(255, 255, 255, .96) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body .n-card, html body .crm-detail-card, html body .page-toolbar, html body .login-form .form { background-image: none !important; background-color: #FFFFFF !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 0 0 1px var(--q-hairline), var(--q-sh-card) !important; } html body .n-modal, html body .n-drawer .n-drawer-content, html body .n-popover:not(.n-popover--raw), html body .n-tooltip, html body .n-dropdown-menu, html body .n-base-select-menu, html body .n-message, html body .n-notification { background-image: none !important; background-color: #FFFFFF !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 0 0 1px var(--q-hairline), var(--q-sh-modal) !important; } html body .n-modal-mask { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(20, 28, 45, .42) !important; } } /* ========================================================================== 16. 登录页：单栏居中 + G3 玻璃登录卡（本轮新增范围） DOM 实测（生产 / 1440x900）： .login-page > .banner-wrap(800x900, 旧营销图+旧深色 logo) + .n-spin-container.flex-1 > .n-spin-content > .login-form(640x900, transform:translateY(-10%)) > .title > .flex.justify-center>img(240x52, login-logo.svg 浅色版) + .title-0 > span.title-welcome(20px, --primary-8) > .form.mt-[40px].min-w-[480px](bg:--text-n10, padding:40, radius 12) > .mb-7(账号登录) + form.n-form > .n-form-item.login-form-item x2 (input 40px) > .n-form-item-feedback-wrapper > .n-form-item-feedback--error > .mt-[12px].mb-7 > button.n-button--primary-type--large--block(400x40) ========================================================================== */ /* 16.1 单栏居中：隐藏营销 banner（连带里面的旧深色 logo），主视图居中 ⚠ .login-page 原来没有高度（靠 800x900 的 banner 撑），banner 一隐藏就塌成内容高， 所以必须显式 min-height:100vh，否则 align-items:center 无处对齐（实测塌到 463px）。 */ html body .login-page { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 100vh !important; overflow-x: hidden !important; overflow-y: auto !important; background-color: transparent !important; background-image: radial-gradient(540px 440px at 34% 42%, rgba(118, 95, 255, .42), transparent 68%), radial-gradient(500px 400px at 68% 54%, rgba(255, 103, 184, .34), transparent 68%), radial-gradient(460px 320px at 52% 86%, rgba(64, 225, 190, .28), transparent 70%) !important; background-attachment: fixed !important; } /* 登录页专属彩色环境光：两团大体积光斑，强化“绚丽夺目” */ html body .login-page::before, html body .login-page::after { content: "" !important; position: fixed !important; z-index: 0 !important; border-radius: 50% !important; pointer-events: none !important; filter: blur(72px) !important; opacity: .58 !important; } html body .login-page::before { width: 620px !important; height: 620px !important; left: -170px !important; top: -190px !important; background: radial-gradient(circle, rgba(116, 104, 255, .90) 0%, rgba(95, 197, 255, .58) 42%, rgba(116, 104, 255, 0) 72%) !important; } html body .login-page::after { width: 680px !important; height: 680px !important; right: -210px !important; bottom: -260px !important; background: radial-gradient(circle, rgba(255, 105, 181, .80) 0%, rgba(255, 160, 118, .46) 44%, rgba(255, 105, 181, 0) 72%) !important; } html body .login-page .banner-wrap { display: none !important; } html body .login-page .n-spin-container { position: relative !important; z-index: 1 !important; flex: 1 1 100% !important; width: 100% !important; } /* 16.2 旧居中 hack 用 transform:translateY(-10%)，按判据2 必须清掉 （transform ≠ none 会建立 fixed 包含块；居中改由 .login-page 的 flex 完成） */ html body .login-form { flex: 0 0 auto !important; height: auto !important; transform: none !important; will-change: auto !important; filter: none !important; } /* 16.3 大号悬浮 G3 玻璃登录卡：宽度 +80%、高度约 +50%，内容列居中 */ html body .login-form .form { position: relative !important; display: flex !important; flex-direction: column !important; justify-content: center !important; width: min(1080px, calc(100vw - 64px)) !important; min-width: 0 !important; max-width: 1080px !important; min-height: clamp(620px, 68vh, 700px) !important; padding: 64px 72px !important; border-radius: 42px !important; background-image: var(--q-noise), radial-gradient(120% 100% at 8% 0%, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .08) 42%, transparent 66%), linear-gradient(135deg, rgba(128, 108, 255, .20) 0%, rgba(80, 205, 255, .12) 48%, rgba(255, 112, 186, .20) 100%), linear-gradient(145deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .22) 52%, rgba(255, 255, 255, .34) 100%) !important; background-size: 160px 160px, auto, auto, auto !important; background-color: transparent !important; -webkit-backdrop-filter: blur(56px) saturate(235%) brightness(1.08) !important; backdrop-filter: blur(56px) saturate(235%) brightness(1.08) !important; border: 1.5px solid rgba(255, 255, 255, .72) !important; box-shadow: 0 0 0 1px rgba(95, 112, 180, .10), inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -1px 0 rgba(28, 38, 78, .08), inset 0 0 80px rgba(255, 255, 255, .20), 0 38px 100px -26px rgba(74, 91, 210, .54), 0 24px 64px -28px rgba(255, 99, 174, .40), 0 4px 16px rgba(20, 30, 60, .10) !important; } /* 大卡内保持一条舒适阅读列，避免输入框被拉到 900px 以上 */ html body .login-form .form > .mb-7, html body .login-form .form > form.n-form { width: min(760px, 100%) !important; margin-left: auto !important; margin-right: auto !important; } /* 载入遮罩跟着卡圆角，避免方角露出 */ html body .login-form .form .mask { border-radius: 42px !important; } /* 16.4 输入框：更大触控面积、玻璃内层高光 */ html body .login-input, html body .login-password-input { width: 100% !important; } html body .login-password-input { height: 54px !important; } html body .login-page .n-input { min-height: 54px !important; } html body .login-page .n-input .n-input__border, html body .login-page .n-input .n-input__state-border { border-radius: 14px !important; } html body .login-page .n-input .n-input__input-el { font-size: 16px !important; } html body .login-page .n-input { border-radius: 14px !important; background-color: rgba(255, 255, 255, .62) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), 0 1px 3px rgba(30, 45, 95, .04) !important; } /* 16.4b 主按钮：蓝紫渐变玻璃高光（只用于登录页视觉焦点） */ html body .login-page .n-button.n-button--primary-type.n-button--block { width: 100% !important; height: 54px !important; border: 0 !important; border-radius: 15px !important; background: linear-gradient(120deg, #00CFE8 0%, #0A74AE 42%, #7357FF 100%) !important; box-shadow: 0 12px 30px -10px rgba(58, 78, 225, .72), inset 0 1px 0 rgba(255, 255, 255, .32) !important; color: #FFFFFF !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: .04em !important; transition: transform 160ms var(--q-ease), box-shadow 160ms var(--q-ease), filter 160ms var(--q-ease) !important; } html body .login-page .n-button.n-button--primary-type.n-button--block:hover { filter: saturate(1.12) brightness(1.06) !important; transform: translateY(-1px) !important; box-shadow: 0 14px 32px -10px rgba(49, 78, 220, .72), inset 0 1px 0 rgba(255, 255, 255, .34) !important; } html body .login-page .n-button.n-button--primary-type.n-button--block:active { transform: translateY(0) !important; } /* 16.5 登录页标题区：文字标居中放大，无描边、改用彩色外发光 v10：去掉 SVG 白描边（贴纸感过重），改为「白光晕 + 紫蓝辉光 + 深投影」的外发光层次 */ html body .login-page .title { width: 100% !important; position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } html body .login-page .title > div { width: 100% !important; } /* 品牌光晕：文字标背后一团蓝紫柔光，把第一行视线先抓住（仅登录页允许高彩度） */ html body .login-page .title::before { content: "" !important; position: absolute !important; left: 50% !important; top: 34% !important; width: 760px !important; max-width: 96% !important; height: 260px !important; transform: translate(-50%, -50%) !important; background: radial-gradient(closest-side, rgba(10, 116, 174, .22) 0%, rgba(91, 77, 240, .15) 52%, rgba(124, 58, 237, .09) 68%, transparent 80%) !important; filter: blur(6px) !important; pointer-events: none !important; z-index: 0 !important; } html body .login-page .title > * { position: relative !important; z-index: 1 !important; } html body .login-page .title img { width: 170px !important; max-width: 100% !important; height: 170px !important; object-fit: contain !important; border-radius: 50% !important; filter: drop-shadow(0 10px 30px rgba(14, 28, 80, .36)) !important; } html body .login-page .title-welcome { margin-top: 16px !important; color: #0D1B44 !important; font-size: 36px !important; font-weight: 900 !important; letter-spacing: .12em !important; text-shadow: 0 2px 0 rgba(255, 255, 255, .90), 0 6px 22px rgba(255, 255, 255, .85), 0 10px 30px rgba(39, 61, 150, .38) !important; } html body .login-page .form > .mb-7 { color: var(--q-ink-1) !important; font-size: 26px !important; font-weight: 600 !important; margin-bottom: 34px !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .72) !important; } html body .login-page .form .n-form-item { margin-bottom: 4px !important; } /* 16.6 失败提示落在字段下方（用既有 .n-form-item-feedback，不额外弹 Toast） */ html body .login-page .n-form-item-feedback--error { color: var(--q-error) !important; font-size: 12px; } html body .login-page .n-form-item-blank--error .n-input { background-color: #FFFFFF !important; } /* 16.7 登录页专属高彩度极光：比后台更浓，承担品牌第一印象。 `:has()` 不支持的浏览器退化为全局 1.0×，不影响功能与可读性。 */ @supports selector(:has(*)) { html:has(.login-page) { --q-au-1: radial-gradient(1200px 900px at 12% -5%, rgba(137, 106, 255, .84), transparent 62%); --q-au-2: radial-gradient(1000px 800px at 80% -10%, rgba(70, 208, 255, .78), transparent 60%); --q-au-3: radial-gradient(900px 700px at 96% 62%, rgba(255, 112, 186, .62), transparent 62%); --q-au-4: radial-gradient(800px 600px at 26% 108%, rgba(80, 240, 189, .54), transparent 60%); --q-au-5: radial-gradient(320px 680px at 1% 44%, rgba(86, 192, 255, .52), transparent 74%); --q-au-base: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .40) 46%, rgba(255, 255, 255, .56) 100%); } } /* ========================================================================== 15. 动效降级 ========================================================================== */ @media (prefers-reduced-motion: reduce) { html body *, html body *::before, html body *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 12. 用户定制：按钮两类全局样式（2026-11-03） 图A：配置页紧凑小按钮(.n-button.\!p-0) 去框去底变纯文字链接 图B：工具栏操作按钮(primary/outline/default/tertiary) 细灰框+直角+柔和阴影 选择器对齐 .n-button.((0,2,2))，靠文件后序压过既有蓝玻璃规则 ========================================================================== */ /* 图B：细灰框 + 直角 + 白底 + 柔和阴影（四类统一） */ html body .n-button.n-button--primary-type, html body .n-button.n-btn-outline-primary, html body .n-button.n-button--default-type, html body .n-button.n-button--tertiary-type { border: 1px solid var(--q-hairline-strong) !important; border-radius: 0 !important; background: var(--q-surface) !important; background-color: var(--q-surface) !important; box-shadow: 0 1px 2px rgba(17,26,48,.06), 0 4px 12px -4px rgba(17,26,48,.12) !important; } html body .n-button.n-button--primary-type, html body .n-button.n-btn-outline-primary { color: var(--q-primary-text) !important; } html body .n-button.n-button--primary-type .n-button__content, html body .n-button.n-btn-outline-primary .n-button__content { color: var(--q-primary-text) !important; } html body .n-button.n-button--default-type, html body .n-button.n-button--default-type .n-button__content { color: var(--q-ink-1) !important; } html body .n-button.n-button--tertiary-type, html body .n-button.n-button--tertiary-type .n-button__content { color: var(--q-ink-2) !important; } html body .n-button.n-button--primary-type:hover, html body .n-button.n-btn-outline-primary:hover, html body .n-button.n-button--default-type:hover, html body .n-button.n-button--tertiary-type:hover { border-color: rgba(16,24,40,.28) !important; background: var(--q-inset) !important; background-color: var(--q-inset) !important; box-shadow: 0 1px 2px rgba(17,26,48,.08), 0 6px 16px -4px rgba(17,26,48,.16) !important; } /* 图A：配置页紧凑小按钮 去框去底变纯文字链接（必须置于图B之后压过 primary 灰框） */ html body .n-button.\!p-0 { border: 0 !important; background: transparent !important; background-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 4px 8px !important; color: var(--q-primary-text) !important; } html body .n-button.\!p-0 .n-button__content { color: var(--q-primary-text) !important; } html body .n-button.\!p-0:hover { background: var(--q-inset) !important; background-color: var(--q-inset) !important; color: var(--q-primary-text) !important; box-shadow: none !important; } /* ========================================================================== 17. 登录页整体缩放 + 「登录」按钮文字（2026-11-07 用户要求） 需求：① 登录界面整体缩小 30%；②「登录」二字纯白 + 黑色描边 + 投影 ========================================================================== */ /* 17.1 整体缩放到 70% 选 zoom 而不是 transform:scale —— · zoom 参与布局回流，缩完后 .login-page 的 flex 居中依然成立； · transform 只改绘制，布局仍占原高，900px 视口下底部会继续溢出 （实测原卡 y=272 + 620 = 892，本就贴底）。 作用域只到 .login-form，外层 .login-page 的极光背景不受影响。 */ html body .login-form { zoom: 0.7 !important; } /* 17.2 「登录」按钮文字：纯白 + 黑描边 + 投影 根因：2026-11-03 的全局按钮规则把 .n-button--primary-type .n-button__content 设成 --q-primary-text(#0A6A9E)，落在蓝紫渐变按钮上几乎看不见（实测 rgb(10,106,158)）。 下面这条特异性 (0,6,2) 压过全局的 (0,4,2)，并连带覆盖按钮内的子节点； paint-order 让描边画在填充之下，避免细笔画被描边吃掉。 */ html body .login-page .n-button.n-button--primary-type.n-button--block .n-button__content, html body .login-page .n-button.n-button--primary-type.n-button--block .n-button__content * { color: #FFFFFF !important; -webkit-text-stroke: 1px #000000 !important; paint-order: stroke fill !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .92), 0 2px 5px rgba(0, 0, 0, .55) !important; } /* 字号补偿：纯 70% 缩放后按钮字只有 11.2px，白字会被 1px 黑描边吃掉、糊成一团。 抬到 19px（视觉 ≈13.3px）后填充面积够，描边才是"描边"而不是"黑块"。 只动按钮文字，不改变整体缩放比例。 */ html body .login-page .n-button.n-button--primary-type.n-button--block .n-button__content { font-size: 19px !important; line-height: 1.1 !important; }