/* ============================================================ * 全局样式 —— Tailwind CSS v4 指令 + 蓝紫渐变主题扩展 + 重置样式 * Tailwind v4 使用 CSS @theme 指令替代 tailwind.config.ts， * 设计令牌需与 tokens.ts / antd-theme.ts 保持同步。 * ============================================================ */ @import 'tailwindcss'; /* ============================================================ * Tailwind CSS v4 主题扩展（用 @theme 指令） * 此处定义的自定义令牌会自动生成对应的 Tailwind 工具类。 * 例如：colors.primary → bg-primary, text-primary, border-primary 等。 * ============================================================ */ /* 品牌色 — 蓝紫渐变 */ @theme { /* 主色系 */ --color-primary: #6366f1; /* Indigo-500 */ --color-primary-light: #818cf8; /* Indigo-400 */ --color-primary-dark: #4f46e5; /* Indigo-600 */ --color-primary-50: #eef2ff; /* Indigo-50 */ --color-primary-100: #e0e7ff; /* Indigo-100 */ --color-primary-200: #c7d2fe; /* Indigo-200 */ --color-primary-300: #a5b4fc; /* Indigo-300 */ --color-primary-400: #818cf8; /* Indigo-400 */ --color-primary-500: #6366f1; /* Indigo-500 */ --color-primary-600: #4f46e5; /* Indigo-600 */ --color-primary-700: #4338ca; /* Indigo-700 */ --color-primary-800: #3730a3; /* Indigo-800 */ --color-primary-900: #312e81; /* Indigo-900 */ /* 辅助色系 — Violet */ --color-secondary: #8b5cf6; /* Violet-500 */ --color-secondary-light: #a78bfa; /* Violet-400 */ --color-secondary-dark: #7c3aed; /* Violet-600 */ /* 功能色 */ --color-success: #10b981; --color-success-light: #d1fae5; --color-warning: #f59e0b; --color-warning-light: #fef3c7; --color-error: #ef4444; --color-error-light: #fee2e2; --color-info: #3b82f6; --color-info-light: #dbeafe; /* 圆角 */ --radius-xs: 4px; --radius-sm: 6px; --radius-base: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; /* 字体 */ --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif; --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Courier New', monospace; /* 动画 */ --transition-duration: 0.2s; --transition-timing: cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================ * 🌞 亮色模式 CSS 变量（默认） * 这些变量与 tokens.ts 中的亮色令牌同步 * ============================================================ */ :root, [data-theme='light'] { /* 中性色 — 亮色 */ --color-text-base: #1e1b4b; --color-text-secondary: #6b7280; --color-text-tertiary: #9ca3af; --color-bg-base: #ffffff; --color-bg-container: #f9fafb; --color-bg-layout: #f5f3ff; --color-bg-elevated: #ffffff; --color-border-base: #e5e7eb; --color-border-secondary: #f3f4f6; /* 阴影 */ --shadow-base: 0 1px 3px 0 rgba(99, 102, 241, 0.08), 0 1px 2px -1px rgba(99, 102, 241, 0.08); --shadow-lg: 0 10px 15px -3px rgba(99, 102, 241, 0.1), 0 4px 6px -4px rgba(99, 102, 241, 0.1); } /* ============================================================ * 🌙 暗色模式 CSS 变量 * 当 时自动切换 * 这些变量与 tokens.ts 中的暗色令牌同步 * ============================================================ */ [data-theme='dark'] { /* 中性色 — 暗色（科技蓝紫） */ --color-text-base: #e8e8fa; --color-text-secondary: #a0a8d8; --color-text-tertiary: #6e78b0; --color-bg-base: #080c24; --color-bg-container: #0f1340; --color-bg-layout: #050818; --color-bg-elevated: #171b52; --color-border-base: #2a3278; --color-border-secondary: #1c2250; /* 暗色模式下品牌色提亮以保持对比度 */ --color-primary: #818cf8; --color-primary-light: #a5b4fc; --color-primary-dark: #6366f1; /* 阴影 — 暗色下用深投影 */ --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4); } /* ============================================================ * 蓝紫渐变工具类 * Tailwind v4 使用 @utility 定义自定义工具类 * ============================================================ */ @utility gradient-primary { background: linear-gradient(135deg, #4f46e5, #7c3aed); } @utility gradient-primary-hover { background: linear-gradient(135deg, #6366f1, #8b5cf6); } @utility gradient-primary-text { background: linear-gradient(135deg, #4f46e5, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } @utility gradient-border { border-image: linear-gradient(135deg, #4f46e5, #7c3aed) 1; } /* ============================================================ * 全局重置样式 * 仅放必要的重置，不堆积组件样式 * ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-family-base); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* 亮/暗切换过渡 */ color-scheme: light dark; } body { margin: 0; padding: 0; color: var(--color-text-base); background-color: var(--color-bg-base); min-height: 100vh; transition: background-color 0.15s linear, color 0.15s linear; } /* ============================================================ * View Transitions API — GPU 合成器驱动的主题切换动画 * 替代 80+ 个独立 CSS 过渡，单次 cross-fade 消除 Electron 卡顿。 * 仅在 Chromium 111+（Electron 28+）生效，其他浏览器回退 CSS 过渡。 * ============================================================ */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.15s; animation-timing-function: linear; } /* ============================================================ * 主题切换过渡 — 精准覆盖大面积视觉容器，避免 * 全局选择器 * 在 Electron 中为数千个 DOM 节点同时启动过渡造成卡顿。 * * 策略： * 1. 容器/布局组件（Card / Modal / Layout / Drawer 等） * 2. 表格 & 列表（Table / List / Timeline） * 3. 表单控件（Input / Select / Picker） * 4. 导航 & 标签（Menu / Tabs / Tag / Breadcrumb） * 5. 反馈 & 展示（Alert / Empty / Result / Statistic / Skeleton） * * 不覆盖交互组件自有 transition（Button / Switch / Slider 等 * 均使用 transition: all，特异性更高不受影响）。 * ============================================================ */ /* —— 布局 & 容器 —— */ body, .ant-layout, .ant-layout-header, .ant-layout-sider, .ant-layout-content, .ant-card, .ant-card-head, .ant-card-body, .ant-card-actions, .ant-modal-content, .ant-modal-header, .ant-modal-body, .ant-modal-footer, .ant-drawer-content, .ant-drawer-header, .ant-drawer-body, .ant-drawer-footer, /* —— 表格 & 列表 —— */ .ant-table, .ant-table-thead > tr > th, .ant-table-tbody > tr > td, .ant-table-tbody > tr:hover > td, .ant-list, .ant-list-item, .ant-timeline-item, .ant-transfer-list, .ant-tree-node-content-wrapper, /* —— 表单控件 —— */ .ant-input, .ant-input-affix-wrapper, .ant-select-selector, .ant-select-dropdown, .ant-picker, .ant-picker-input, .ant-picker-dropdown, .ant-picker-panel-container, .ant-input-number, .ant-input-number-input, .ant-radio-button-wrapper, .ant-radio-group, .ant-checkbox-wrapper, .ant-segmented, .ant-segmented-item, .ant-upload-drag, .ant-upload-list-item, /* —— 导航 & 标签 —— */ .ant-menu, .ant-menu-item, .ant-menu-submenu-title, .ant-tabs-nav, .ant-tabs-nav-list, .ant-tabs-tab, .ant-tabs-content, .ant-tag, .ant-breadcrumb, .ant-pagination-item, .ant-dropdown-menu, /* —— 反馈 & 展示 —— */ .ant-alert, .ant-empty, .ant-result, .ant-statistic, .ant-statistic-content, .ant-badge, .ant-avatar, .ant-divider, .ant-skeleton, .ant-skeleton-input, .ant-skeleton-button, .ant-notification-notice, .ant-message-notice-content, .ant-popover-inner, .ant-tooltip-inner, .ant-collapse, .ant-collapse-item, .ant-collapse-header, .ant-collapse-content-box, .ant-descriptions-item-container { transition: color 0.15s linear, background-color 0.15s linear, border-color 0.15s linear, box-shadow 0.15s linear; } #root { min-height: 100vh; } /* 滚动条美化 */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #a5b4fc; } /* 暗色模式滚动条 */ [data-theme='dark'] ::-webkit-scrollbar-thumb { background: #4338ca; } [data-theme='dark'] ::-webkit-scrollbar-thumb:hover { background: #4f46e5; } /* 聚焦环 — 使用品牌色 */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* 选中文本 — 使用品牌色 */ ::selection { background: rgba(99, 102, 241, 0.2); color: var(--color-text-base); } [data-theme='dark'] ::selection { background: rgba(129, 140, 248, 0.3); color: var(--color-text-base); } /* 链接全局样式 */ a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-duration) var(--transition-timing); } a:hover { color: var(--color-primary-light); } /* ============================================================ * 窗口拖拽区域（自定义导航栏） * * macOS hiddenInset 模式下，整个导航栏区域可拖拽移动窗口。 * .navbar-drag-region → 可拖拽（背景区域） * .navbar-no-drag → 不可拖拽（按钮、链接等交互元素） * ============================================================ */ .navbar-drag-region { -webkit-app-region: drag; user-select: none; } .navbar-no-drag { -webkit-app-region: no-drag; } /* macOS 红绿灯按钮区域不遮挡内容 */ @supports (-webkit-app-region: drag) { .navbar-drag-region { -webkit-app-region: drag; } }