/* ============================================================================ * design_tokens.css —— 统一深色科技感主题层（收敛层，非堆叠） * ---------------------------------------------------------------------------- * 目标：把历史 25 个 CSS 的 4 套竞争主题（白蓝 / 靛紫 Premium / 科技蓝 dashboard / * 深蓝 HUD control）收敛为【一套】深色科技感视觉。 * * 唯一权威 token（本层优先级最高，放在 index.html 最后加载）： * 主色 primary #4da3ff (hover #2d7eea) * 辅助青 #67d5ff 绿 #4bd39b 琥珀 #e6b15d 红 #ff7d91 * 背景层级 bg #0b0c0e / surface #131317 / elevated #0e0e11 * 文字层级 正文 #e8e9ec / 次要 #a0a6b0 / 弱化 #6b7280 * 圆角 卡片 14px / 按钮 10px / 输入框 8px / 弹窗 12px * 间距 弹窗 padding 20px / 卡片间距 16px * 主按钮 background #4da3ff + color #0b0c0e（全局一致，修掉全局注入 * "深色半透明像没激活"的问题） * 边框 rgba(255,255,255,.08) * * 覆盖手段：html:root + html[data-theme="dark"] 双锚点 + body:has(.brand-lockup) * 长链选择器 + !important，特异性压过 premium 的 html:root 长链与 * ui_white_blue 的 :root[data-theme] 规则（参考记忆 D 的教训）。 * 不删除任何既有 CSS，只追加本层。 * ========================================================================== */ /* --------------------------------------------------------------------------- * 1. 权威设计 token —— 用最高特异性钉死 --fc-* 与各竞争主题 --dash-* / --lin-* * / --linear-* / --miaoda-* / --lg-control-* / --lg-* / --gugu-* * 无论哪套组件规则胜出，var() 都解析为本层统一值。 * ------------------------------------------------------------------------- */ /* 双锚点：同时覆盖 （无 data-theme）与 两种情况， * 并叠加 body:has(.brand-lockup) 拉高特异性压过 premium 的 html:root 单锚点。 */ html:root, html:root[data-theme="dark"] { /* —— 画布与表面高程 —— */ --fc-bg: #0b0c0e !important; --fc-bg-body: #0b0c0e !important; --fc-bg-root: #0b0c0e !important; --fc-bg-shell: #0b0c0e !important; --fc-bg-page: #0b0c0e !important; --fc-bg-deep: #070708 !important; --fc-bg-panel: #131317 !important; --fc-bg-sidebar: #0e0e11 !important; --fc-bg-topbar: rgba(13,13,16,.86) !important; --fc-surface: #131317 !important; --fc-surface-hi: #1a1a1f !important; --fc-elevated: #0e0e11 !important; --fc-overlay: rgba(4,4,6,.62) !important; --fc-input-bg: #111114 !important; --fc-th-bg: #141419 !important; --fc-hover-bg: rgba(255,255,255,.045) !important; --fc-toast-bg: #17171c !important; --fc-toast-border: rgba(255,255,255,.1) !important; --fc-toast-text: #e8e9ec !important; /* —— 描边（统一 rgba(255,255,255,.08)）—— */ --fc-border: rgba(255,255,255,.08) !important; --fc-border-soft: rgba(255,255,255,.05) !important; --fc-border-hi: rgba(255,255,255,.15) !important; --fc-border-focus: #4da3ff !important; --fc-table-row-border: rgba(255,255,255,.05) !important; /* —— 文字层级（消除 dashboard 纯白 vs 注入灰 不一致）—— */ --fc-text: #e8e9ec !important; --fc-text-hi: #f7f7f8 !important; --fc-text-secondary: #a0a6b0 !important; --fc-text-muted: #a0a6b0 !important; --fc-text-mute: #a0a6b0 !important; --fc-text-lo: #6b7280 !important; --fc-text-topbar: #e8e9ec !important; --fc-text-topbar-muted:#a0a6b0 !important; --fc-text-on-primary: #0b0c0e !important; --fc-form-label: #a0a6b0 !important; --fc-form-hint: #6b7280 !important; --fc-link: #4da3ff !important; /* —— 主色：科技蓝 #4da3ff（与 dashboard --dash-blue 一致）—— */ --fc-primary: #4da3ff !important; --fc-primary-hi: #6ab8ff !important; --fc-primary-lo: #2d7eea !important; --fc-primary-border: rgba(77,163,255,.55) !important; --fc-primary-soft: rgba(77,163,255,.15) !important; --fc-primary-glow: rgba(77,163,255,.42) !important; --fc-accent: #4da3ff !important; --fc-accent-hi: #6ab8ff !important; --fc-accent-soft: rgba(77,163,255,.15) !important; --fc-accent-blue: #4da3ff !important; --fc-accent-purple: #6ab8ff !important; --fc-blue: #6ab8ff !important; --fc-blue-soft: rgba(106,184,255,.16) !important; --fc-blue-border: rgba(106,184,255,.4) !important; --fc-grad-accent: linear-gradient(135deg,#4da3ff,#6ab8ff) !important; --fc-grad-primary: linear-gradient(135deg,#4da3ff,#2d7eea) !important; --fc-grad-surface: linear-gradient(180deg,#16161b,#101013) !important; --fc-grad-hero: linear-gradient(135deg,rgba(77,163,255,.16),rgba(103,213,255,.08) 60%,transparent) !important; /* —— 语义色 —— */ --fc-success: #4bd39b !important; --fc-success-soft: rgba(75,211,155,.14) !important; --fc-success-border:rgba(75,211,155,.4) !important; --fc-warn: #e6b15d !important; --fc-warn-soft: rgba(230,177,93,.14) !important; --fc-danger: #ff7d91 !important; --fc-danger-soft: rgba(255,125,145,.14) !important; --fc-danger-border: rgba(255,125,145,.4) !important; --fc-info: #67d5ff !important; --fc-info-soft: rgba(103,213,255,.14) !important; /* —— 圆角系统（收敛 14 vs 16 冲突）—— */ --fc-radius-xs: 6px !important; --fc-radius-sm: 8px !important; /* 输入框 */ --fc-radius-md: 10px !important; /* 按钮 */ --fc-radius-lg: 14px !important; /* 卡片 */ --fc-radius-xl: 18px !important; --fc-radius-pill: 999px !important; --fc-radius: 10px !important; /* —— 阴影 —— */ --fc-shadow-xs: 0 1px 2px rgba(0,0,0,.4) !important; --fc-shadow-sm: 0 2px 8px rgba(0,0,0,.38) !important; --fc-shadow: 0 8px 24px rgba(0,0,0,.38) !important; --fc-shadow-lg: 0 18px 44px rgba(0,0,0,.46) !important; --fc-shadow-xl: 0 28px 64px rgba(0,0,0,.55) !important; --fc-shadow-focus: 0 0 0 3px rgba(77,163,255,.28) !important; /* —— 侧栏导航 —— */ --fc-sidebar-nav: #a0a6b0 !important; --fc-sidebar-nav-hover: #e8e9ec !important; --fc-sidebar-active-bg: rgba(77,163,255,.14) !important; --fc-sidebar-active-border: #4da3ff !important; /* —— 滚动条 / 选区 —— */ --fc-scrollbar-track: transparent !important; --fc-scrollbar-thumb: rgba(255,255,255,.12) !important; --fc-scrollbar-thumb-hi: rgba(255,255,255,.2) !important; --fc-scrollbar: rgba(255,255,255,.12) !important; --fc-selection-bg: rgba(77,163,255,.42) !important; --fc-selection-text: #ffffff !important; } /* —— 竞争主题变量归一化（钉死为科技蓝 token）—— */ html:root body:has(.brand-lockup), html:root[data-theme="dark"] body:has(.brand-lockup) { /* --dash-*（dashboard_override_final.css 蓝）*/ --dash-bg: #0b0c0e !important; --dash-bg-deep: #070708 !important; --dash-surface: #131317 !important; --dash-surface-raised: #1a1a1f !important; --dash-surface-hover: #1c1c21 !important; --dash-card: rgba(19,19,23,.94) !important; --dash-card-soft: rgba(19,19,23,.78) !important; --dash-border: rgba(255,255,255,.08) !important; --dash-border-strong: rgba(255,255,255,.15) !important; --dash-ink: #f7f7f8 !important; --dash-text: #a0a6b0 !important; --dash-muted: #a0a6b0 !important; --dash-faint: #6b7280 !important; --dash-blue: #4da3ff !important; --dash-blue-strong: #2d7eea !important; --dash-cyan: #67d5ff !important; --dash-green: #4bd39b !important; --dash-amber: #e6b15d !important; --dash-red: #ff7d91 !important; --dash-radius: 14px !important; /* 收敛 16px → 14px */ --dash-shadow: 0 18px 42px rgba(0,0,0,.36) !important; /* --lin-*（dashboard_relayout_v3.css）*/ --lin-canvas: #0b0c0e !important; --lin-surface-1: #131317 !important; --lin-surface-2: #16161b !important; --lin-surface-3: #1a1a1f !important; --lin-surface-4: #202025 !important; --lin-line: rgba(255,255,255,.08) !important; --lin-line-strong: rgba(255,255,255,.15) !important; --lin-line-soft: rgba(255,255,255,.05) !important; --lin-ink: #f7f7f8 !important; --lin-ink-muted: #a0a6b0 !important; --lin-ink-subtle: #a0a6b0 !important; --lin-ink-tertiary: #6b7280 !important; --lin-accent: #4da3ff !important; --lin-accent-hover: #6ab8ff !important; --lin-accent-soft: rgba(77,163,255,.14) !important; --lin-success: #4bd39b !important; --lin-warning: #e6b15d !important; --lin-danger: #ff7d91 !important; --lin-radius-xs: 6px !important; --lin-radius-sm: 8px !important; --lin-radius-md: 10px !important; --lin-radius-lg: 14px !important; --lin-shadow: 0 18px 40px rgba(0,0,0,.32) !important; /* --linear-*（ui_white_blue_override.css Linear 复刻）*/ --linear-canvas: #0b0c0e !important; --linear-surface-1: #131317 !important; --linear-surface-2: #16161b !important; --linear-surface-3: #1a1a1f !important; --linear-border: rgba(255,255,255,.08) !important; --linear-border-strong: rgba(255,255,255,.15) !important; --linear-ink: #f7f7f8 !important; --linear-muted: #a0a6b0 !important; --linear-subtle: #a0a6b0 !important; --linear-tertiary: #6b7280 !important; --linear-primary: #4da3ff !important; --linear-primary-hover: #6ab8ff !important; --linear-primary-pressed: #2d7eea !important; /* --miaoda-*（ui_white_blue_override.css 紫）*/ --miaoda-bg: #0b0c0e !important; --miaoda-bg-soft: #0e0e11 !important; --miaoda-surface: rgba(19,19,23,.78) !important; --miaoda-surface-solid: #131317 !important; --miaoda-surface-raised: rgba(26,26,31,.86) !important; --miaoda-border: rgba(255,255,255,.08) !important; --miaoda-border-strong: rgba(77,163,255,.42) !important; --miaoda-ink: #f7f7f8 !important; --miaoda-muted: #a0a6b0 !important; --miaoda-subtle: #a0a6b0 !important; --miaoda-blue: #4da3ff !important; --miaoda-blue-hover: #6ab8ff !important; --miaoda-violet: #6ab8ff !important; --miaoda-cyan: #67d5ff !important; --miaoda-success: #4bd39b !important; --miaoda-shadow: 0 20px 60px rgba(0,0,0,.4) !important; /* --gugu-*（ui_white_blue_override.css 白蓝）→ 收敛为深色科技蓝 */ --gugu-blue-900: #4da3ff !important; --gugu-blue-800: #4da3ff !important; --gugu-blue-700: #4da3ff !important; --gugu-blue-600: #4da3ff !important; --gugu-blue-500: #6ab8ff !important; --gugu-blue-200: #a0a6b0 !important; --gugu-blue-100: #1a1a1f !important; --gugu-blue-50: #131317 !important; --gugu-ink: #e8e9ec !important; --gugu-muted: #a0a6b0 !important; --gugu-border: rgba(255,255,255,.08) !important; --gugu-shadow: 0 8px 24px rgba(0,0,0,.4) !important; } /* --lg-control-*（control_ui_harmonize.css 深蓝 HUD）→ 收敛为科技蓝 */ html:root body .control-page, html:root[data-theme="dark"] body .control-page { --lg-control-canvas: #0b0c0e !important; --lg-control-surface: rgba(19,19,23,.92) !important; --lg-control-surface-2: rgba(26,26,31,.9) !important; --lg-control-border: rgba(255,255,255,.08) !important; --lg-control-border-strong: rgba(77,163,255,.5) !important; --lg-control-ink: #e8e9ec !important; --lg-control-muted: #a0a6b0 !important; --lg-control-blue: #4da3ff !important; --lg-control-blue-hi: #6ab8ff !important; } /* --lg-*（login_backend_relayout.css 登录页）→ 收敛为科技蓝 */ html:root body:has(.login-page), html:root[data-theme="dark"] body:has(.login-page) { --lg-canvas: #0b0c0e !important; --lg-surface: #131317 !important; --lg-surface-2: #16161b !important; --lg-surface-3: #131317 !important; --lg-line: rgba(255,255,255,.08) !important; --lg-line-soft: rgba(255,255,255,.05) !important; --lg-text: #f7f7f8 !important; --lg-text-muted: #a0a6b0 !important; --lg-text-subtle: #a0a6b0 !important; --lg-blue: #4da3ff !important; --lg-blue-bright: #6ab8ff !important; --lg-blue-deep: #2d7eea !important; } /* --------------------------------------------------------------------------- * 2. 全局画布 —— body / html 强制深色 + 文字层级 * ------------------------------------------------------------------------- */ html:root body, html:root[data-theme="dark"] body { background: #0b0c0e !important; color: #e8e9ec !important; -webkit-font-smoothing: antialiased !important; } html:root body ::selection, html:root[data-theme="dark"] body ::selection { background: rgba(77,163,255,.42) !important; color: #fff !important; } /* --------------------------------------------------------------------------- * 3. 主按钮统一 —— background #4da3ff + color #0b0c0e（亮蓝底深字） * 修掉全局注入"深色半透明像没激活"的问题 * ------------------------------------------------------------------------- */ html:root body:has(.brand-lockup) .ant-btn-primary, html:root[data-theme="dark"] body:has(.brand-lockup) .ant-btn-primary, html:root body:has(.brand-lockup) .login-button, html:root body:has(.brand-lockup) .ctrl-tab-action, html:root body:has(.brand-lockup) .ctrl-qbtn, html:root body:has(.brand-lockup) .sidebar-btn, html:root body:has(.brand-lockup) .sidebar-btn-sm { background: #4da3ff !important; background-image: none !important; border: 1px solid rgba(77,163,255,.6) !important; color: #0b0c0e !important; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 6px 18px rgba(77,163,255,.28) !important; } html:root body:has(.brand-lockup) .ant-btn-primary:hover, html:root[data-theme="dark"] body:has(.brand-lockup) .ant-btn-primary:hover, html:root body:has(.brand-lockup) .login-button:hover, html:root body:has(.brand-lockup) .ctrl-tab-action:hover, html:root body:has(.brand-lockup) .ctrl-qbtn:hover, html:root body:has(.brand-lockup) .sidebar-btn:hover, html:root body:has(.brand-lockup) .sidebar-btn-sm:hover { background: #6ab8ff !important; background-image: none !important; border-color: rgba(106,184,255,.75) !important; color: #0b0c0e !important; box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 10px 24px rgba(77,163,255,.36) !important; } html:root body:has(.brand-lockup) .ant-btn-primary:active, html:root[data-theme="dark"] body:has(.brand-lockup) .ant-btn-primary:active, html:root body:has(.brand-lockup) .ctrl-tab-action:active, html:root body:has(.brand-lockup) .ctrl-qbtn:active { background: #2d7eea !important; background-image: none !important; color: #0b0c0e !important; box-shadow: 0 2px 8px rgba(77,163,255,.24) !important; } /* 登录页按钮同样收敛为科技蓝 */ html:root body:has(.login-page) .login-button, html:root[data-theme="dark"] body:has(.login-page) .login-button { background: #4da3ff !important; background-image: none !important; border-color: rgba(77,163,255,.6) !important; color: #0b0c0e !important; box-shadow: 0 12px 28px rgba(77,163,255,.35), 0 1px 0 rgba(255,255,255,.22) inset !important; } html:root body:has(.login-page) .login-button:hover, html:root[data-theme="dark"] body:has(.login-page) .login-button:hover { background: #6ab8ff !important; background-image: none !important; } /* --------------------------------------------------------------------------- * 4. 圆角统一 —— 卡片 14px / 按钮 10px / 输入框 8px / 弹窗 12px * ------------------------------------------------------------------------- */ /* 卡片 / 面板 */ html:root body:has(.brand-lockup) .panel, html:root[data-theme="dark"] body:has(.brand-lockup) .panel, html:root body:has(.brand-lockup) .s-card, html:root body:has(.brand-lockup) .device-card, html:root body:has(.brand-lockup) .sidebar-card, html:root body:has(.brand-lockup) .ant-card { border-radius: 14px !important; border: 1px solid rgba(255,255,255,.08) !important; background: linear-gradient(180deg, #16161b, #111114) !important; } /* 按钮 —— 加 #root .ant-layout-content 前缀压过 `html body:has(.brand-lockup) #root .ant-layout-content button { 8px !important }` 这条真凶规则（ID #root 特异性更高，必须同前缀加长链才能压过） */ html:root body:has(.brand-lockup) #root .ant-layout-content button, html:root[data-theme="dark"] body:has(.brand-lockup) #root .ant-layout-content button, html:root body:has(.brand-lockup) #root .ant-layout-content .ant-btn, html:root[data-theme="dark"] body:has(.brand-lockup) #root .ant-layout-content .ant-btn, html:root body:has(.brand-lockup) #root button, html:root[data-theme="dark"] body:has(.brand-lockup) #root button, html:root body:has(.brand-lockup) #root .ant-btn, html:root[data-theme="dark"] body:has(.brand-lockup) #root .ant-btn { border-radius: 10px !important; } /* 输入框 —— 加 #root 前缀压过同款锁死规则 */ html:root body:has(.brand-lockup) #root input, html:root[data-theme="dark"] body:has(.brand-lockup) #root input, html:root body:has(.brand-lockup) #root textarea, html:root body:has(.brand-lockup) #root .ant-input, html:root[data-theme="dark"] body:has(.brand-lockup) #root .ant-input, html:root body:has(.brand-lockup) #root .ant-input-affix-wrapper, html:root body:has(.brand-lockup) #root .ant-select-selector { border-radius: 8px !important; border: 1px solid rgba(255,255,255,.1) !important; background: #111114 !important; color: #e8e9ec !important; } /* 弹窗 */ html:root body:has(.brand-lockup) .ant-modal-content, html:root[data-theme="dark"] body:has(.brand-lockup) .ant-modal-content, html:root body:has(.brand-lockup) .ant-dropdown-menu, html:root body:has(.brand-lockup) .ant-select-dropdown, html:root body:has(.brand-lockup) .ant-picker-dropdown { border-radius: 12px !important; background: #17171c !important; border: 1px solid rgba(255,255,255,.1) !important; } /* 弹窗 padding 20px */ html:root body:has(.brand-lockup) .ant-modal-content, html:root[data-theme="dark"] body:has(.brand-lockup) .ant-modal-content { padding: 20px !important; } /* --------------------------------------------------------------------------- * 5. 侧栏文字层级统一 —— 消除 dashboard 纯白 vs 注入灰 的不一致 * ------------------------------------------------------------------------- */ html:root body:has(.brand-lockup) .ant-menu, html:root[data-theme="dark"] body:has(.brand-lockup) .ant-menu, html:root body:has(.brand-lockup) .ant-menu-dark, html:root body:has(.brand-lockup) .ant-menu-item, html:root body:has(.brand-lockup) .ant-menu-submenu-title { color: #a0a6b0 !important; } html:root body:has(.brand-lockup) .ant-menu-item:hover, html:root[data-theme="dark"] body:has(.brand-lockup) .ant-menu-item:hover, html:root body:has(.brand-lockup) .ant-menu-submenu-title:hover, html:root body:has(.brand-lockup) .ant-menu-item-selected, html:root[data-theme="dark"] body:has(.brand-lockup) .ant-menu-item-selected { color: #e8e9ec !important; } html:root body:has(.brand-lockup) .ant-menu-item-selected, html:root[data-theme="dark"] body:has(.brand-lockup) .ant-menu-item-selected { background: rgba(77,163,255,.14) !important; } html:root body:has(.brand-lockup) .ant-menu-item-selected::after, html:root[data-theme="dark"] body:has(.brand-lockup) .ant-menu-item-selected::after { border-inline-end: 3px solid #4da3ff !important; } /* --------------------------------------------------------------------------- * 6. 边框统一 rgba(255,255,255,.08) * ------------------------------------------------------------------------- */ html:root body:has(.brand-lockup) .ant-table-wrapper, html:root[data-theme="dark"] body:has(.brand-lockup) .ant-table-wrapper, html:root body:has(.brand-lockup) .rc-table-wrap, html:root body:has(.brand-lockup) .ant-layout-sider, html:root body:has(.brand-lockup) .ctrl-toolbar { border: 1px solid rgba(255,255,255,.08) !important; } /* --------------------------------------------------------------------------- * 7. 表格文字层级 + 圆角 * ------------------------------------------------------------------------- */ html:root body:has(.brand-lockup) .ant-table-wrapper, html:root[data-theme="dark"] body:has(.brand-lockup) .ant-table-wrapper, html:root body:has(.brand-lockup) .rc-table-wrap { border-radius: 12px !important; background: #131317 !important; } html:root body:has(.brand-lockup) .rc-table-wrap th, html:root body:has(.brand-lockup) .ant-table-thead th { color: #a0a6b0 !important; background: #141419 !important; } html:root body:has(.brand-lockup) .rc-table-wrap td, html:root body:has(.brand-lockup) .ant-table-tbody td { color: #e8e9ec !important; }