/* ============================================================== theme-vars.css — ERP 系统三套主题 CSS 变量定义 主题：dark（深空蓝）| light（极简白）| green（草绿色） 通过 切换 ============================================================== */ /* ===== 深空蓝主题（当前系统主题，暗色） ===== */ :root, [data-theme="dark"] { /* ---------- 页面背景 ---------- */ --bg-body: #0a0e27; --bg-main: #0a0e27; --bg-page-header: rgba(255, 255, 255, 0.03); --bg-navbar: #3b82f6; /* ---------- 侧边栏 ---------- */ --bg-sidebar: radial-gradient(ellipse at 15% 20%, rgba(59, 130, 246, 0.22) 0%, transparent 55%), radial-gradient(ellipse at 88% 75%, rgba(139, 92, 246, 0.16) 0%, transparent 55%), radial-gradient(ellipse at 50% 50%, rgba(16, 185, 129, 0.04) 0%, transparent 50%), linear-gradient(180deg, #0b1428 0%, #0f1d3d 50%, #0b1428 100%); --bg-sidebar-solid: #0a0e27; --bg-sidebar-support: rgba(10, 14, 39, 0.95); --bg-sidebar-logo: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.08)); --bg-sidebar-toggle: linear-gradient(to bottom, #1f3760, #1a2a4a); --bg-sidebar-toggle-hover: linear-gradient(to bottom, #1f3760, #1a2a4a); --sidebar-text: rgba(255, 255, 255, 0.55); --sidebar-text-hover: rgba(255, 255, 255, 0.9); --sidebar-text-active: #ffffff; --sidebar-text-sub: rgba(255, 255, 255, 0.45); --sidebar-text-sub-hover: rgba(255, 255, 255, 0.8); --sidebar-text-arrow: rgba(255, 255, 255, 0.2); --sidebar-text-arrow-open: rgba(59, 130, 246, 0.6); --sidebar-hover: rgba(59, 130, 246, 0.08); --sidebar-active: rgba(59, 130, 246, 0.12); --sidebar-border: rgba(59, 130, 246, 0.12); --sidebar-active-border: #3b82f6; --sidebar-glow: rgba(59, 130, 246, 0.18); --sidebar-glow2: rgba(139, 92, 246, 0.15); /* ---------- 卡片 ---------- */ --bg-card: rgba(255, 255, 255, 0.03); --bg-card-header: rgba(255, 255, 255, 0.04); --border-card: rgba(255, 255, 255, 0.06); --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3); /* ---------- 模态框 ---------- */ --bg-modal: #111633; --bg-modal-header: transparent; --bg-modal-footer: transparent; --border-modal: rgba(255, 255, 255, 0.08); --shadow-modal: 0 25px 60px rgba(0, 0, 0, 0.5); /* ---------- 表格 ---------- */ --bg-table-header: rgba(255, 255, 255, 0.04); --bg-table-stripe: rgba(255, 255, 255, 0.02); --bg-table-hover: rgba(59, 130, 246, 0.05); --bg-table-detail: rgba(255, 255, 255, 0.02); --bg-table-detail-header: #1a2045; --bg-table-fixed-header: #0f142d; --bg-table-seq: #0a0e27; --border-table: rgba(255, 255, 255, 0.06); --border-table-detail: rgba(59, 130, 246, 0.2); /* ---------- 表单控件 ---------- */ --bg-input: rgba(255, 255, 255, 0.05); --bg-input-focus: rgba(255, 255, 255, 0.08); --bg-input-disabled: rgba(255, 255, 255, 0.02); --bg-select-option: #151a35; --bg-input-group-text: rgba(255, 255, 255, 0.06); --bg-form-check: rgba(255, 255, 255, 0.08); --border-input: rgba(255, 255, 255, 0.1); --border-input-focus: rgba(59, 130, 246, 0.5); --shadow-input-focus: 0 0 0 3px rgba(59, 130, 246, 0.1); /* ---------- 下拉菜单 / Select2 ---------- */ --bg-dropdown: #111633; --bg-dropdown-item-hover: rgba(59, 130, 246, 0.1); --bg-select2: rgba(255, 255, 255, 0.05); --bg-select2-choice: rgba(59, 130, 246, 0.15); --bg-select2-highlight: rgba(59, 130, 246, 0.15); --bg-select2-selected: rgba(59, 130, 246, 0.1); --bg-select2-dropdown: #111633; --bg-select2-search: rgba(255, 255, 255, 0.05); --border-dropdown: rgba(255, 255, 255, 0.08); --border-select2: rgba(255, 255, 255, 0.1); --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.4); /* ---------- Tab 标签栏 ---------- */ --bg-tab-bar: rgba(255, 255, 255, 0.02); --bg-tab-hover: rgba(59, 130, 246, 0.08); --bg-tab-active: rgba(59, 130, 246, 0.1); --border-tab-bar: rgba(255, 255, 255, 0.06); --border-tab-active: #3b82f6; /* ---------- 分页 ---------- */ --bg-pagination: rgba(255, 255, 255, 0.04); --bg-pagination-hover: rgba(59, 130, 246, 0.1); --bg-pagination-active: #3b82f6; --bg-pagination-disabled: rgba(255, 255, 255, 0.02); --border-pagination: rgba(255, 255, 255, 0.08); --border-pagination-hover: rgba(59, 130, 246, 0.3); /* ---------- 搜索行 / 操作按钮行 ---------- */ --bg-search-row: transparent; --bg-action-bar: transparent; /* ---------- 列表组 ---------- */ --bg-list-group: rgba(255, 255, 255, 0.03); --bg-list-group-hover: rgba(59, 130, 246, 0.05); --border-list-group: rgba(255, 255, 255, 0.06); /* ---------- 列管理 ---------- */ --bg-col-mgr-btn: rgba(255, 255, 255, 0.05); --bg-col-mgr-item-hover: rgba(59, 130, 246, 0.05); --bg-col-mgr-dragging: rgba(59, 130, 246, 0.1); --border-col-mgr-btn: rgba(255, 255, 255, 0.15); --border-col-mgr-drag-over: #3b82f6; /* ---------- 进度条 ---------- */ --bg-progress: rgba(255, 255, 255, 0.06); /* ---------- 提示框 / Toast ---------- */ --bg-toast: #111633; --bg-toast-header: rgba(255, 255, 255, 0.04); --border-toast: rgba(255, 255, 255, 0.08); /* ---------- 弹出框 / Tooltip ---------- */ --bg-popover: #111633; --bg-popover-header: rgba(255, 255, 255, 0.04); --bg-tooltip: #111633; --border-popover: rgba(255, 255, 255, 0.08); /* ---------- Offcanvas ---------- */ --bg-offcanvas: #111633; /* ---------- 手风琴 ---------- */ --bg-accordion: rgba(255, 255, 255, 0.03); --bg-accordion-open: rgba(59, 130, 246, 0.08); --border-accordion: rgba(255, 255, 255, 0.06); /* ================================ 文字颜色 ================================ */ --text-primary: rgba(255, 255, 255, 0.85); --text-body: rgba(255, 255, 255, 0.75); --text-secondary: rgba(255, 255, 255, 0.7); --text-muted: rgba(255, 255, 255, 0.45); --text-disabled: rgba(255, 255, 255, 0.3); --text-white: #ffffff; --text-heading: rgba(255, 255, 255, 0.85); --text-label: rgba(255, 255, 255, 0.6); --text-placeholder: rgba(255, 255, 255, 0.25); --text-table: rgba(255, 255, 255, 0.8); --text-table-header: rgba(255, 255, 255, 0.7); --text-link: #60a5fa; --text-link-hover: #93bbfc; --text-small: rgba(255, 255, 255, 0.45); --text-form-check-label: rgba(255, 255, 255, 0.65); --text-form-text: rgba(255, 255, 255, 0.35); --text-input: rgba(255, 255, 255, 0.85); --text-input-readonly: rgba(255, 255, 255, 0.6); --text-placeholder-input: rgba(255, 255, 255, 0.25); --text-select2: rgba(255, 255, 255, 0.85); --text-select2-placeholder: rgba(255, 255, 255, 0.3); --text-select2-option: rgba(255, 255, 255, 0.7); --text-toast: rgba(255, 255, 255, 0.8); --text-toast-header: rgba(255, 255, 255, 0.7); --text-badge: rgba(255, 255, 255, 0.6); --text-tab: rgba(255, 255, 255, 0.45); --text-tab-hover: rgba(255, 255, 255, 0.7); --text-tab-active: #60a5fa; --text-tab-close: rgba(255, 255, 255, 0.3); --text-tab-close-hover: rgba(255, 255, 255, 0.7); --text-pagination: rgba(255, 255, 255, 0.6); --text-pagination-hover: #60a5fa; --text-pagination-disabled: rgba(255, 255, 255, 0.2); --text-nav-link: rgba(255, 255, 255, 0.65); --text-nav-link-hover: rgba(255, 255, 255, 0.9); --text-breadcrumb: rgba(255, 255, 255, 0.5); --text-breadcrumb-active: rgba(255, 255, 255, 0.8); --text-col-mgr: rgba(255, 255, 255, 0.7); --text-col-mgr-hover: #60a5fa; --text-dropdown-item: rgba(255, 255, 255, 0.7); --text-dropdown-item-hover: #ffffff; --text-user-name: rgba(255, 255, 255, 0.7); --text-help-btn: #60a5fa; --text-help-btn-hover: #93bbfc; --text-logout-btn: rgba(239, 68, 68, 0.7); --text-logout-btn-hover: #ef4444; --text-super-badge: #fbbf24; /* ================================ 边框颜色 ================================ */ --border-color: rgba(255, 255, 255, 0.06); --border-divider: rgba(255, 255, 255, 0.06); --border-light: rgba(255, 255, 255, 0.08); --border-hr: rgba(255, 255, 255, 0.06); /* ================================ 强调 / 交互颜色 ================================ */ --color-primary: #3b82f6; --color-primary-hover: #2563eb; --color-primary-light: #60a5fa; --color-primary-lighter: #93bbfc; --color-danger: #ef4444; --color-danger-hover: #dc2626; --color-success: #10b981; --color-success-hover: #059669; --color-warning: #f59e0b; --color-info: #3b82f6; --color-accent-purple: #8b5cf6; /* ================================ 按钮颜色 ================================ */ --btn-primary-bg: linear-gradient(135deg, #3b82f6, #2563eb); --btn-primary-shadow: 0 4px 16px rgba(59, 130, 246, 0.35); --btn-secondary-bg: rgba(255, 255, 255, 0.08); --btn-secondary-hover-bg: rgba(255, 255, 255, 0.12); --btn-secondary-border: rgba(255, 255, 255, 0.1); --btn-secondary-text: rgba(255, 255, 255, 0.7); --btn-secondary-text-hover: rgba(255, 255, 255, 0.9); --btn-success-bg: linear-gradient(135deg, #10b981, #059669); --btn-light-bg: rgba(255, 255, 255, 0.1); --btn-light-border: rgba(255, 255, 255, 0.15); --btn-light-text: rgba(255, 255, 255, 0.85); --btn-light-hover-bg: rgba(255, 255, 255, 0.15); --btn-light-hover-border: rgba(255, 255, 255, 0.2); --btn-light-hover-text: #ffffff; --btn-outline-dark-color: rgba(255, 255, 255, 0.7); --btn-outline-dark-border: rgba(255, 255, 255, 0.3); --btn-outline-secondary-color: rgba(255, 255, 255, 0.6); --btn-outline-secondary-border: rgba(255, 255, 255, 0.2); --btn-copy-bg: #dc3545; --btn-copy-hover-bg: #c82333; /* ================================ 状态标签颜色（文字色 — 三套主题共用） ================================ */ --status-draft: #ffffff; --status-pending: #ffd700; --status-confirmed: #7dff7d; --status-cancelled: #ff6b6b; --status-completed: #00e676; --status-completed-partial: #ffa726; --status-closed: #9e9e9e; --status-approved: #00e676; --status-rejected: #ff6b6b; --status-bom-missing: #ff6b6b; --status-purchasing: #4dd0e1; --status-paid: #00e676; --status-enabled: #00e676; --status-disabled: #ff6b6b; --inbound-none: #adb5bd; --inbound-partial: #ffd700; --inbound-full: #00e676; --outbound-none: #adb5bd; --outbound-partial: #ffd700; --outbound-full: #00e676; --pay-none: #ff6b6b; --pay-advance: #4dd0e1; --pay-partial: #ffd700; --pay-full: #00e676; --invoice-none: #adb5bd; --invoice-partial: #ffd700; --invoice-full: #00e676; --reconcile-none: #ff6b6b; --reconcile-pending: #ffd700; --reconcile-done: #00e676; --delivery-overdue: #ff6b6b; --delivery-due-soon: #ffb300; --delivery-pending: #b388ff; --delivery-on-time: #00e676; --delivery-overdue-delivered: #ffd700; --ar-pending: #ffd700; --ar-confirmed: #4dd0e1; --ar-partial: #ffb300; --ar-completed: #00e676; --reg-pending: #ffd700; --reg-approved: #00e676; --reg-rejected: #ff6b6b; --bom-na: #adb5bd; --bom-ok: #00e676; --bom-missing: #ff6b6b; --issue-none: #adb5bd; --issue-partial: #ffd700; --issue-full: #00e676; --receive-none: #adb5bd; --receive-partial: #ffd700; --receive-full: #00e676; --settle-none: #adb5bd; /* ================================ 状态标签背景色（仅 light/blue 主题使用） ================================ */ --bg-status-draft: rgba(255, 255, 255, 0.15); --bg-status-pending: rgba(255, 215, 0, 0.2); --bg-status-confirmed: rgba(125, 255, 125, 0.2); --bg-status-cancelled: rgba(255, 107, 107, 0.2); --bg-status-completed: rgba(0, 230, 118, 0.2); --bg-status-partial: rgba(255, 167, 38, 0.2); --bg-status-closed: rgba(158, 158, 158, 0.2); --bg-status-purchasing: rgba(77, 208, 225, 0.2); --bg-status-none: rgba(173, 181, 189, 0.2); --bg-status-danger: rgba(255, 107, 107, 0.2); --bg-status-advance: rgba(77, 208, 225, 0.2); --bg-status-due: rgba(255, 179, 0, 0.2); --bg-status-pending-delivery: rgba(179, 136, 255, 0.2); /* ================================ 警告 / 提示颜色 ================================ */ --alert-info-bg: rgba(59, 130, 246, 0.12); --alert-info-border: rgba(59, 130, 246, 0.2); --alert-info-text: #93bbfc; --alert-success-bg: rgba(16, 185, 129, 0.12); --alert-success-border: rgba(16, 185, 129, 0.2); --alert-success-text: #6ee7b7; --alert-warning-bg: rgba(250, 204, 21, 0.12); --alert-warning-border: rgba(250, 204, 21, 0.2); --alert-warning-text: #fde68a; --alert-danger-bg: rgba(239, 68, 68, 0.12); --alert-danger-border: rgba(239, 68, 68, 0.2); --alert-danger-text: #fca5a5; /* ================================ 滚动条 ================================ */ --scrollbar-track: rgba(255, 255, 255, 0.02); --scrollbar-thumb: rgba(59, 130, 246, 0.2); --scrollbar-thumb-hover: rgba(59, 130, 246, 0.4); --scrollbar-sidebar-track: transparent; --scrollbar-sidebar-thumb: rgba(59, 130, 246, 0.2); --scrollbar-sidebar-thumb-hover: rgba(59, 130, 246, 0.4); --scrollbar-tab-thumb: rgba(59, 130, 246, 0.3); /* ================================ 盒阴影 ================================ */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-sidebar-toggle: 2px 0 12px rgba(0, 0, 0, 0.2); --shadow-sidebar-toggle-hover: 2px 0 16px rgba(59, 130, 246, 0.25); /* ================================ 特殊按钮 / 复制按钮等 ================================ */ --copy-btn-bg: #dc3545; --copy-btn-hover-bg: #c82333; /* ================================ 模态框全屏按钮 ================================ */ --modal-fullscreen-btn-color: rgba(255, 255, 255, 0.4); --modal-fullscreen-btn-hover: rgba(255, 255, 255, 0.9); } /* ===== 草绿色主题（温暖绿色） ===== */ [data-theme="green"] { /* 页面背景 */ --bg-body: #f5faf0; --bg-main: #f5faf0; --bg-page-header: #ffffff; --bg-navbar: #1a3a2a; /* 侧边栏 */ --bg-sidebar: linear-gradient(180deg, #1a3a2a 0%, #2a5a3a 50%, #1a3a2a 100%); --bg-sidebar-solid: #1a3a2a; --bg-sidebar-support: rgba(26, 58, 42, 0.95); --bg-sidebar-logo: linear-gradient(135deg, rgba(74, 158, 90, 0.2), rgba(74, 158, 90, 0.1)); --bg-sidebar-toggle: linear-gradient(to bottom, #2a5a3a, #1a3a2a); --bg-sidebar-toggle-hover: linear-gradient(to bottom, #2a5a3a, #1a3a2a); --sidebar-text: rgba(255, 255, 255, 0.75); --sidebar-text-hover: rgba(255, 255, 255, 0.9); --sidebar-text-active: #ffffff; --sidebar-text-sub: rgba(255, 255, 255, 0.65); --sidebar-text-sub-hover: rgba(255, 255, 255, 0.8); --sidebar-text-arrow: rgba(255, 255, 255, 0.4); --sidebar-text-arrow-open: rgba(74, 158, 90, 0.6); --sidebar-hover: rgba(74, 158, 90, 0.1); --sidebar-active: rgba(74, 158, 90, 0.15); --sidebar-border: rgba(74, 158, 90, 0.15); --sidebar-active-border: #4a9e5a; --sidebar-glow: rgba(74, 158, 90, 0.15); --sidebar-glow2: rgba(74, 158, 90, 0.1); /* 卡片 */ --bg-card: #ffffff; --bg-card-header: #f5faf0; --border-card: #d0e0c8; --shadow-card: 0 2px 8px rgba(74, 158, 90, 0.06); /* 模态框 */ --bg-modal: #ffffff; --bg-modal-header: #f5faf0; --bg-modal-footer: #f5faf0; --border-modal: #d0e0c8; --shadow-modal: 0 8px 32px rgba(26, 58, 42, 0.15); /* 表格 */ --bg-table-header: #f0f5ea; --bg-table-stripe: rgba(74, 158, 90, 0.02); --bg-table-hover: rgba(74, 158, 90, 0.05); --bg-table-detail: #f5faf0; --bg-table-detail-header: #dce8d4; --bg-table-fixed-header: #f0f5ea; --bg-table-seq: #eef3e8; --border-table: #d0e0c8; --border-table-detail: #4a9e5a; /* 表单控件 */ --bg-input: #ffffff; --bg-input-focus: #ffffff; --bg-input-disabled: #f5f8f2; --bg-select-option: #ffffff; --bg-input-group-text: #e8f0e2; --bg-form-check: #ffffff; --border-input: #c8d8c0; --border-input-focus: #4a9e5a; --shadow-input-focus: 0 0 0 3px rgba(74, 158, 90, 0.12); /* 下拉菜单 / Select2 */ --bg-dropdown: #ffffff; --bg-dropdown-item-hover: rgba(74, 158, 90, 0.06); --bg-select2: #ffffff; --bg-select2-choice: #dce8d4; --bg-select2-highlight: rgba(74, 158, 90, 0.08); --bg-select2-selected: rgba(74, 158, 90, 0.05); --bg-select2-dropdown: #ffffff; --bg-select2-search: #ffffff; --border-dropdown: #d0e0c8; --border-select2: #c8d8c0; --shadow-dropdown: 0 4px 16px rgba(26, 58, 42, 0.12); /* Tab 标签栏 */ --bg-tab-bar: #e8f0e2; --bg-tab-hover: #dce8d4; --bg-tab-active: #ffffff; --border-tab-bar: #c8d8c0; --border-tab-active: #4a9e5a; /* 分页 */ --bg-pagination: #ffffff; --bg-pagination-hover: rgba(74, 158, 90, 0.06); --bg-pagination-active: #4a9e5a; --bg-pagination-disabled: #f0f5ea; --border-pagination: #c8d8c0; --border-pagination-hover: #4a9e5a; /* 搜索行 / 操作按钮行 */ --bg-search-row: #ffffff; --bg-action-bar: #ffffff; /* 列表组 */ --bg-list-group: #ffffff; --bg-list-group-hover: rgba(74, 158, 90, 0.04); --border-list-group: #d0e0c8; /* 列管理 */ --bg-col-mgr-btn: #ffffff; --bg-col-mgr-item-hover: #f0f5ea; --bg-col-mgr-dragging: #e6f0e2; --border-col-mgr-btn: #c8d8c0; --border-col-mgr-drag-over: #4a9e5a; /* 进度条 */ --bg-progress: #d0e0c8; /* Toast */ --bg-toast: #ffffff; --bg-toast-header: #f5faf0; --border-toast: #d0e0c8; /* 弹出框 / Tooltip */ --bg-popover: #ffffff; --bg-popover-header: #f5faf0; --bg-tooltip: #1a3a2a; --border-popover: #d0e0c8; /* Offcanvas */ --bg-offcanvas: #ffffff; /* 手风琴 */ --bg-accordion: #ffffff; --bg-accordion-open: rgba(74, 158, 90, 0.06); --border-accordion: #d0e0c8; /* ===== 文字颜色 ===== */ --text-primary: #2a3a2a; --text-body: #3a4a3a; --text-secondary: #5a6a5a; --text-muted: #7a8a7a; --text-disabled: #b0c0b0; --text-white: #ffffff; --text-heading: #2a3a2a; --text-label: #5a6a5a; --text-placeholder: #b0c0b0; --text-table: #3a4a3a; --text-table-header: #5a6a5a; --text-link: #4a9e5a; --text-link-hover: #3a8a4a; --text-small: #7a8a7a; --text-form-check-label: #5a6a5a; --text-form-text: #7a8a7a; --text-input: #2a3a2a; --text-input-readonly: #5a6a5a; --text-placeholder-input: #b0c0b0; --text-select2: #2a3a2a; --text-select2-placeholder: #b0c0b0; --text-select2-option: #3a4a3a; --text-toast: #3a4a3a; --text-toast-header: #5a6a5a; --text-badge: #5a6a5a; --text-tab: #5a6a5a; --text-tab-hover: #2a3a2a; --text-tab-active: #4a9e5a; --text-tab-close: #8a9a8a; --text-tab-close-hover: #2a3a2a; --text-pagination: #5a6a5a; --text-pagination-hover: #4a9e5a; --text-pagination-disabled: #b0c0b0; --text-nav-link: #5a6a5a; --text-nav-link-hover: #2a3a2a; --text-breadcrumb: #7a8a7a; --text-breadcrumb-active: #3a4a3a; --text-col-mgr: #3a4a3a; --text-col-mgr-hover: #4a9e5a; --text-dropdown-item: #3a4a3a; --text-dropdown-item-hover: #2a3a2a; --text-user-name: #3a4a3a; --text-help-btn: #4a9e5a; --text-help-btn-hover: #3a8a4a; --text-logout-btn: #ff4d4f; --text-logout-btn-hover: #ef4444; --text-super-badge: #d4a017; /* ===== 边框颜色 ===== */ --border-color: #d0e0c8; --border-divider: #d0e0c8; --border-light: #c8d8c0; --border-hr: #d0e0c8; /* ===== 按钮 ===== */ --btn-secondary-bg: #e8f0e2; --btn-secondary-hover-bg: #dce8d4; --btn-secondary-border: #c8d8c0; --btn-secondary-text: #3a4a3a; --btn-secondary-text-hover: #2a3a2a; --btn-light-bg: #f0f5ea; --btn-light-border: #c8d8c0; --btn-light-text: #3a4a3a; --btn-light-hover-bg: #e0ecd8; --btn-light-hover-border: #a0c0a0; --btn-light-hover-text: #2a3a2a; --btn-outline-dark-color: #3a4a3a; --btn-outline-dark-border: #8a9a8a; --btn-outline-secondary-color: #5a6a5a; --btn-outline-secondary-border: #b0c8b0; /* ===== 状态标签背景色 ===== */ --bg-status-draft: #eef3ec; --bg-status-pending: #fff8e1; --bg-status-confirmed: #e8f5e9; --bg-status-cancelled: #ffebee; --bg-status-completed: #e8f5e9; --bg-status-partial: #fff3e0; --bg-status-closed: #f0f5ec; --bg-status-purchasing: #e0f7fa; --bg-status-none: #f0f5ec; --bg-status-danger: #ffebee; --bg-status-advance: #e0f7fa; --bg-status-due: #fff8e1; --bg-status-pending-delivery: #f3eaf5; /* ===== 警告颜色 ===== */ --alert-info-bg: #e6f0e6; --alert-info-border: #a0c8a0; --alert-info-text: #1a4a2a; --alert-success-bg: #f0faf0; --alert-success-border: #b0d8b0; --alert-success-text: #1a4a1a; --alert-warning-bg: #fff8e6; --alert-warning-border: #ffe090; --alert-warning-text: #7a4a00; --alert-danger-bg: #fff0f0; --alert-danger-border: #ffc8c8; --alert-danger-text: #8a1a1a; /* ===== 滚动条 ===== */ --scrollbar-track: #e8f0e2; --scrollbar-thumb: #b0c8b0; --scrollbar-thumb-hover: #8aaa8a; --scrollbar-sidebar-track: transparent; --scrollbar-sidebar-thumb: rgba(74, 158, 90, 0.3); --scrollbar-sidebar-thumb-hover: rgba(74, 158, 90, 0.5); --scrollbar-tab-thumb: #b0c8b0; /* ===== 阴影 ===== */ --shadow-sm: 0 2px 4px rgba(26, 58, 42, 0.04); --shadow-md: 0 4px 12px rgba(26, 58, 42, 0.08); --shadow-lg: 0 8px 24px rgba(26, 58, 42, 0.1); --shadow-sidebar-toggle: 2px 0 8px rgba(0, 0, 0, 0.15); --shadow-sidebar-toggle-hover: 2px 0 12px rgba(74, 158, 90, 0.2); /* ===== 特殊按钮 ===== */ --modal-fullscreen-btn-color: rgba(26, 58, 42, 0.4); --modal-fullscreen-btn-hover: rgba(26, 58, 42, 0.8); --copy-btn-bg: #dc3545; --copy-btn-hover-bg: #c82333; /* ===== 状态标签文字颜色（浅色背景覆盖，暗色→可见） ===== */ --status-draft: #555555; --status-pending: #8b6914; --status-confirmed: #1b5e20; --status-cancelled: #b71c1c; --status-completed: #1b5e20; --status-completed-partial: #c43e00; --status-closed: #616161; --status-approved: #1b5e20; --status-rejected: #b71c1c; --status-bom-missing: #b71c1c; --status-purchasing: #00695c; --status-paid: #1b5e20; --status-enabled: #1b5e20; --status-disabled: #b71c1c; --inbound-none: #7a8a7a; --inbound-partial: #8b6914; --inbound-full: #1b5e20; --outbound-none: #7a8a7a; --outbound-partial: #8b6914; --outbound-full: #1b5e20; --pay-none: #b71c1c; --pay-advance: #00695c; --pay-partial: #8b6914; --pay-full: #1b5e20; --invoice-none: #7a8a7a; --invoice-partial: #8b6914; --invoice-full: #1b5e20; --reconcile-none: #b71c1c; --reconcile-pending: #8b6914; --reconcile-done: #1b5e20; --delivery-overdue: #b71c1c; --delivery-due-soon: #8b6914; --delivery-pending: #6a1b9a; --delivery-on-time: #1b5e20; --delivery-overdue-delivered: #8b6914; --ar-pending: #8b6914; --ar-confirmed: #00695c; --ar-partial: #c43e00; --ar-completed: #1b5e20; --reg-pending: #8b6914; --reg-approved: #1b5e20; --reg-rejected: #b71c1c; --bom-na: #7a8a7a; --bom-ok: #1b5e20; --bom-missing: #b71c1c; --issue-none: #7a8a7a; --issue-partial: #8b6914; --issue-full: #1b5e20; --receive-none: #7a8a7a; --receive-partial: #8b6914; --receive-full: #1b5e20; --settle-none: #7a8a7a; } /* ===== 极简白主题（浅色） ===== */ [data-theme="light"] { /* 页面背景 */ --bg-body: #f5f6fa; --bg-main: #f5f6fa; --bg-page-header: #ffffff; --bg-navbar: #3b82f6; /* 侧边栏 */ --bg-sidebar: #ffffff; --bg-sidebar-solid: #ffffff; --bg-sidebar-support: #f8f9fa; --bg-sidebar-logo: linear-gradient(135deg, #f0f4ff, #e8f0fe); --bg-sidebar-toggle: linear-gradient(to bottom, #e8eef5, #dce3ed); --bg-sidebar-toggle-hover: linear-gradient(to bottom, #dce3ed, #d0d8e5); --sidebar-text: #5a6a7a; --sidebar-text-hover: #1a2332; --sidebar-text-active: #3b82f6; --sidebar-text-sub: #7a8a9a; --sidebar-text-sub-hover: #3b82f6; --sidebar-text-arrow: #b0bcc8; --sidebar-text-arrow-open: #3b82f6; --sidebar-hover: rgba(59, 130, 246, 0.06); --sidebar-active: rgba(59, 130, 246, 0.1); --sidebar-border: #e8ecf0; --sidebar-active-border: #3b82f6; --sidebar-glow: transparent; --sidebar-glow2: transparent; /* 卡片 */ --bg-card: #ffffff; --bg-card-header: #ffffff; --border-card: #e8ecf0; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06); /* 模态框 */ --bg-modal: #ffffff; --bg-modal-header: #f8f9fa; --bg-modal-footer: #f8f9fa; --border-modal: #e0e4e8; --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.12); /* 表格 */ --bg-table-header: #f8f9fa; --bg-table-stripe: rgba(0, 0, 0, 0.02); --bg-table-hover: rgba(59, 130, 246, 0.04); --bg-table-detail: #fafcff; --bg-table-detail-header: #e8f0fe; --bg-table-fixed-header: #ffffff; --bg-table-seq: #f0f0f0; --border-table: #e8ecf0; --border-table-detail: #3b82f6; /* 表单控件 */ --bg-input: #ffffff; --bg-input-focus: #ffffff; --bg-input-disabled: #f5f5f5; --bg-select-option: #ffffff; --bg-input-group-text: #f0f2f5; --bg-form-check: #ffffff; --border-input: #d0d5dd; --border-input-focus: #3b82f6; --shadow-input-focus: 0 0 0 3px rgba(59, 130, 246, 0.12); /* 下拉菜单 / Select2 */ --bg-dropdown: #ffffff; --bg-dropdown-item-hover: rgba(59, 130, 246, 0.06); --bg-select2: #ffffff; --bg-select2-choice: #e8f0fe; --bg-select2-highlight: rgba(59, 130, 246, 0.08); --bg-select2-selected: rgba(59, 130, 246, 0.05); --bg-select2-dropdown: #ffffff; --bg-select2-search: #ffffff; --border-dropdown: #e0e4e8; --border-select2: #d0d5dd; --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.1); /* Tab 标签栏 */ --bg-tab-bar: #f5f5f5; --bg-tab-hover: #e8e8e8; --bg-tab-active: #ffffff; --border-tab-bar: #d9d9d9; --border-tab-active: #1890ff; /* 分页 */ --bg-pagination: #ffffff; --bg-pagination-hover: rgba(59, 130, 246, 0.06); --bg-pagination-active: #3b82f6; --bg-pagination-disabled: #f5f5f5; --border-pagination: #d9d9d9; --border-pagination-hover: #3b82f6; /* 搜索行 / 操作按钮行 */ --bg-search-row: #ffffff; --bg-action-bar: #ffffff; /* 列表组 */ --bg-list-group: #ffffff; --bg-list-group-hover: rgba(59, 130, 246, 0.04); --border-list-group: #e8ecf0; /* 列管理 */ --bg-col-mgr-btn: #ffffff; --bg-col-mgr-item-hover: #fafafa; --bg-col-mgr-dragging: #e6f7ff; --border-col-mgr-btn: #d9d9d9; --border-col-mgr-drag-over: #1890ff; /* 进度条 */ --bg-progress: #e8ecf0; /* Toast */ --bg-toast: #ffffff; --bg-toast-header: #f8f9fa; --border-toast: #e0e4e8; /* 弹出框 / Tooltip */ --bg-popover: #ffffff; --bg-popover-header: #f8f9fa; --bg-tooltip: #333333; --border-popover: #e0e4e8; /* Offcanvas */ --bg-offcanvas: #ffffff; /* 手风琴 */ --bg-accordion: #ffffff; --bg-accordion-open: rgba(59, 130, 246, 0.04); --border-accordion: #e8ecf0; /* ===== 文字颜色 ===== */ --text-primary: #1a2332; --text-body: #333333; --text-secondary: #5a6a7a; --text-muted: #8a9aaa; --text-disabled: #b0bcc8; --text-white: #ffffff; --text-heading: #1a2332; --text-label: #5a6a7a; --text-placeholder: #b0bcc8; --text-table: #333333; --text-table-header: #5a6a7a; --text-link: #3b82f6; --text-link-hover: #2563eb; --text-small: #8a9aaa; --text-form-check-label: #5a6a7a; --text-form-text: #8a9aaa; --text-input: #1a2332; --text-input-readonly: #5a6a7a; --text-placeholder-input: #b0bcc8; --text-select2: #1a2332; --text-select2-placeholder: #b0bcc8; --text-select2-option: #333333; --text-toast: #333333; --text-toast-header: #5a6a7a; --text-badge: #5a6a7a; --text-tab: #666666; --text-tab-hover: #333333; --text-tab-active: #1890ff; --text-tab-close: #999999; --text-tab-close-hover: #333333; --text-pagination: #5a6a7a; --text-pagination-hover: #3b82f6; --text-pagination-disabled: #b0bcc8; --text-nav-link: #5a6a7a; --text-nav-link-hover: #1a2332; --text-breadcrumb: #8a9aaa; --text-breadcrumb-active: #333333; --text-col-mgr: #333333; --text-col-mgr-hover: #1890ff; --text-dropdown-item: #333333; --text-dropdown-item-hover: #1a2332; --text-user-name: #333333; --text-help-btn: #3b82f6; --text-help-btn-hover: #2563eb; --text-logout-btn: #ff4d4f; --text-logout-btn-hover: #ef4444; --text-super-badge: #faad14; /* ===== 边框颜色 ===== */ --border-color: #e8ecf0; --border-divider: #e8ecf0; --border-light: #e0e4e8; --border-hr: #e8ecf0; /* ===== 按钮 ===== */ --btn-secondary-bg: #f0f2f5; --btn-secondary-hover-bg: #e8ecf0; --btn-secondary-border: #d0d5dd; --btn-secondary-text: #333333; --btn-secondary-text-hover: #1a2332; --btn-light-bg: #f5f5f5; --btn-light-border: #d9d9d9; --btn-light-text: #333333; --btn-light-hover-bg: #e8e8e8; --btn-light-hover-border: #cccccc; --btn-light-hover-text: #1a2332; --btn-outline-dark-color: #333333; --btn-outline-dark-border: #999999; --btn-outline-secondary-color: #5a6a7a; --btn-outline-secondary-border: #cccccc; /* ===== 状态标签背景色（浅色主题需要背景） ===== */ --bg-status-draft: #f0f0f0; --bg-status-pending: #fff8e1; --bg-status-confirmed: #e8f5e9; --bg-status-cancelled: #ffebee; --bg-status-completed: #e8f5e9; --bg-status-partial: #fff3e0; --bg-status-closed: #f5f5f5; --bg-status-purchasing: #e0f7fa; --bg-status-none: #f5f5f5; --bg-status-danger: #ffebee; --bg-status-advance: #e0f7fa; --bg-status-due: #fff8e1; --bg-status-pending-delivery: #f3e5f5; /* ===== 警告颜色（浅色） ===== */ --alert-info-bg: #e6f7ff; --alert-info-border: #91d5ff; --alert-info-text: #0050b3; --alert-success-bg: #f6ffed; --alert-success-border: #b7eb8f; --alert-success-text: #135200; --alert-warning-bg: #fffbe6; --alert-warning-border: #ffe58f; --alert-warning-text: #874d00; --alert-danger-bg: #fff2f0; --alert-danger-border: #ffccc7; --alert-danger-text: #a8071a; /* ===== 滚动条（浅色） ===== */ --scrollbar-track: #f1f1f1; --scrollbar-thumb: #c0c0c0; --scrollbar-thumb-hover: #999999; --scrollbar-sidebar-track: #f1f1f1; --scrollbar-sidebar-thumb: #c0c0c0; --scrollbar-sidebar-thumb-hover: #999999; --scrollbar-tab-thumb: #c0c0c0; /* ===== 阴影（浅色） ===== */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1); --shadow-sidebar-toggle: 2px 0 8px rgba(0, 0, 0, 0.08); --shadow-sidebar-toggle-hover: 2px 0 12px rgba(59, 130, 246, 0.15); /* ===== 特殊按钮 ===== */ --modal-fullscreen-btn-color: rgba(0, 0, 0, 0.4); --modal-fullscreen-btn-hover: rgba(0, 0, 0, 0.8); --copy-btn-bg: #dc3545; --copy-btn-hover-bg: #c82333; /* ===== 状态标签文字颜色（浅色背景覆盖） ===== */ --status-draft: #555555; --status-pending: #8b6914; --status-confirmed: #1b5e20; --status-cancelled: #b71c1c; --status-completed: #1b5e20; --status-completed-partial: #c43e00; --status-closed: #616161; --status-approved: #1b5e20; --status-rejected: #b71c1c; --status-bom-missing: #b71c1c; --status-purchasing: #00695c; --status-paid: #1b5e20; --status-enabled: #1b5e20; --status-disabled: #b71c1c; --inbound-none: #8a9aaa; --inbound-partial: #8b6914; --inbound-full: #1b5e20; --outbound-none: #8a9aaa; --outbound-partial: #8b6914; --outbound-full: #1b5e20; --pay-none: #b71c1c; --pay-advance: #00695c; --pay-partial: #8b6914; --pay-full: #1b5e20; --invoice-none: #8a9aaa; --invoice-partial: #8b6914; --invoice-full: #1b5e20; --reconcile-none: #b71c1c; --reconcile-pending: #8b6914; --reconcile-done: #1b5e20; --delivery-overdue: #b71c1c; --delivery-due-soon: #8b6914; --delivery-pending: #6a1b9a; --delivery-on-time: #1b5e20; --delivery-overdue-delivered: #8b6914; --ar-pending: #8b6914; --ar-confirmed: #00695c; --ar-partial: #c43e00; --ar-completed: #1b5e20; --reg-pending: #8b6914; --reg-approved: #1b5e20; --reg-rejected: #b71c1c; --bom-na: #8a9aaa; --bom-ok: #1b5e20; --bom-missing: #b71c1c; --issue-none: #8a9aaa; --issue-partial: #8b6914; --issue-full: #1b5e20; --receive-none: #8a9aaa; --receive-partial: #8b6914; --receive-full: #1b5e20; --settle-none: #8a9aaa; }