/** * @file variables.css * @description ZUOEKAI插件统一CSS变量定义 - 支持多主题切换 * @author ZUOEKAI Team * @created 2025-11-11 * * 使用方法： * 1. 在html或body标签上添加 data-theme="theme-name" 属性 * 2. 例如：或 * 3. 不指定时默认使用 pink-blue 主题 */ /* ==================== 主题1：粉蓝渐变主题（默认） ==================== */ :root, :root[data-theme="pink-blue"], body[data-theme="pink-blue"] { /* 核心配色 */ --zuoekai-plugin-primary: #ec4899; --zuoekai-plugin-secondary: #3b82f6; --zuoekai-plugin-accent: #8b5cf6; --zuoekai-plugin-success: #10b981; --zuoekai-plugin-warning: #ec4899; --zuoekai-plugin-warning-light: rgba(236, 72, 153, 0.1); --zuoekai-plugin-warning-dark: #be185d; --zuoekai-plugin-error: #ef4444; --zuoekai-plugin-info: #3b82f6; /* 渐变配色 */ --zuoekai-plugin-gradient-primary: linear-gradient(135deg, #ec4899 0%, #3b82f6 100%); --zuoekai-plugin-gradient-border: linear-gradient(135deg, #ec4899 0%, #3b82f6 100%); /* 辉光效果 */ --zuoekai-plugin-glow-shadow: 0 0 15px rgba(236, 72, 153, 0.6), 0 0 15px rgba(59, 130, 246, 0.6); /* 弹窗头部背景 */ --zuoekai-plugin-modal-header-bg: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(255, 255, 255, 0.95)); --zuoekai-plugin-dialog-header-bg: linear-gradient(135deg, #ec4899 0%, #3b82f6 100%); /* 按钮渐变 */ --zuoekai-plugin-btn-primary-bg: linear-gradient(135deg, #ec4899, #3b82f6); --zuoekai-plugin-btn-secondary-bg: linear-gradient(135deg, #3b82f6, #6366f1); --zuoekai-plugin-gradient-accent: linear-gradient(135deg, #f093fb, #f5576c); /* 阴影颜色 */ --zuoekai-plugin-shadow-primary: rgba(236, 72, 153, 0.3); --zuoekai-plugin-shadow-primary-hover: rgba(236, 72, 153, 0.4); --zuoekai-plugin-shadow-secondary: rgba(59, 130, 246, 0.3); --zuoekai-plugin-shadow-secondary-hover: rgba(59, 130, 246, 0.4); --zuoekai-plugin-shadow-accent: rgba(245, 87, 108, 0.3); --zuoekai-plugin-shadow-accent-hover: rgba(245, 87, 108, 0.4); /* 边框颜色 */ --zuoekai-plugin-border-primary: rgba(236, 72, 153, 0.2); /* 主色辅助颜色 */ --zuoekai-plugin-primary-light: rgba(236, 72, 153, 0.1); --zuoekai-plugin-primary-hover: #db2777; /* 按钮悬停背景 */ --zuoekai-plugin-btn-text-hover-bg: rgba(236, 72, 153, 0.1); --zuoekai-plugin-btn-text-hover-color: #db2777; /* 输入框焦点阴影 */ --zuoekai-plugin-input-focus-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1); /* 特殊弹窗类型头部背景 */ --zuoekai-plugin-modal-confirm-header-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(255, 255, 255, 0.95)); --zuoekai-plugin-modal-warning-header-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(255, 255, 255, 0.95)); --zuoekai-plugin-modal-error-header-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(255, 255, 255, 0.95)); --zuoekai-plugin-modal-info-header-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(255, 255, 255, 0.95)); /* 关闭按钮（主题相关） */ --zuoekai-plugin-close-btn-color: #ffffff; --zuoekai-plugin-close-btn-hover-bg: rgba(236, 72, 153, 0.1); --zuoekai-plugin-close-btn-hover-color: #ec4899; /* 滚动条（主题相关） */ --zuoekai-plugin-scrollbar-track-bg: #f1f5f9; --zuoekai-plugin-scrollbar-thumb-hover: #db2777; /* 弹窗标题颜色（主题相关） */ --zuoekai-plugin-modal-title-color: #ffffff; --zuoekai-plugin-dialog-title-color: #ffffff; /* Toast文字颜色（主题相关） */ --zuoekai-plugin-toast-text-color: #ffffff; } /* ==================== 主题2：万里牛原版配色（粉紫黄三色渐变） ==================== */ :root[data-theme="original"], body[data-theme="original"] { /* 核心配色 */ --zuoekai-plugin-primary: #f98db9; --zuoekai-plugin-secondary: #97ddff; --zuoekai-plugin-accent: #ffcd66; --zuoekai-plugin-success: #22c55e; --zuoekai-plugin-warning: #ffcd66; --zuoekai-plugin-warning-light: rgba(255, 205, 102, 0.15); --zuoekai-plugin-warning-dark: #f59e0b; --zuoekai-plugin-error: #ef4444; --zuoekai-plugin-info: #3b82f6; /* 渐变配色 */ --zuoekai-plugin-gradient-primary: linear-gradient(135deg, #f98db9, #ff9bb8); --zuoekai-plugin-gradient-border: linear-gradient(60deg, #ffcd66, #97ddff, #f98db9); /* 辉光效果 */ --zuoekai-plugin-glow-shadow: 0 0 15px rgba(249, 141, 185, 0.7), 0 0 15px rgba(151, 221, 255, 0.7), 0 0 15px rgba(255, 205, 102, 0.7); /* 弹窗头部背景 */ --zuoekai-plugin-modal-header-bg: linear-gradient(135deg, rgba(249, 141, 185, 0.1), rgba(255, 255, 255, 0.95)); --zuoekai-plugin-dialog-header-bg: linear-gradient(90deg, rgba(255, 205, 102, 0.4), rgba(151, 221, 255, 0.4), rgba(249, 141, 185, 0.4) ); /* 按钮渐变 */ --zuoekai-plugin-btn-primary-bg: linear-gradient(135deg, #f98db9, #ff9bb8); --zuoekai-plugin-btn-secondary-bg: linear-gradient(135deg, #97ddff, #7dd3fc); --zuoekai-plugin-gradient-accent: linear-gradient(135deg, #ffcd66, #ffb347); /* 阴影颜色 */ --zuoekai-plugin-shadow-primary: rgba(249, 141, 185, 0.3); --zuoekai-plugin-shadow-primary-hover: rgba(249, 141, 185, 0.4); --zuoekai-plugin-shadow-secondary: rgba(151, 221, 255, 0.3); --zuoekai-plugin-shadow-secondary-hover: rgba(151, 221, 255, 0.4); --zuoekai-plugin-shadow-accent: rgba(255, 205, 102, 0.3); --zuoekai-plugin-shadow-accent-hover: rgba(255, 205, 102, 0.4); /* 边框颜色 */ --zuoekai-plugin-border-primary: rgba(249, 141, 185, 0.2); /* 主色辅助颜色 */ --zuoekai-plugin-primary-light: rgba(249, 141, 185, 0.1); --zuoekai-plugin-primary-hover: #e674a3; /* 按钮悬停背景 */ --zuoekai-plugin-btn-text-hover-bg: rgba(249, 141, 185, 0.1); --zuoekai-plugin-btn-text-hover-color: #e674a3; /* 输入框焦点阴影 */ --zuoekai-plugin-input-focus-shadow: 0 0 0 3px rgba(249, 141, 185, 0.1); /* 特殊弹窗类型头部背景 */ --zuoekai-plugin-modal-confirm-header-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(255, 255, 255, 0.95)); --zuoekai-plugin-modal-warning-header-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(255, 255, 255, 0.95)); --zuoekai-plugin-modal-error-header-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(255, 255, 255, 0.95)); --zuoekai-plugin-modal-info-header-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(255, 255, 255, 0.95)); /* 关闭按钮（主题相关） */ --zuoekai-plugin-close-btn-color: #ffffff; --zuoekai-plugin-close-btn-hover-bg: rgba(249, 141, 185, 0.1); --zuoekai-plugin-close-btn-hover-color: #f98db9; /* 滚动条（主题相关） */ --zuoekai-plugin-scrollbar-track-bg: #f1f5f9; --zuoekai-plugin-scrollbar-thumb-hover: #e674a3; /* 弹窗标题颜色（主题相关） - 原版使用深色标题 */ --zuoekai-plugin-modal-title-color: #1f2937; --zuoekai-plugin-dialog-title-color: #1f2937; /* Toast文字颜色（主题相关） - 原版使用黑色文字 */ --zuoekai-plugin-toast-text-color: #1f2937; } /* ==================== 主题3：专业蓝色主题 ==================== */ :root[data-theme="professional-blue"], body[data-theme="professional-blue"] { /* 核心配色 */ --zuoekai-plugin-primary: #2563eb; --zuoekai-plugin-secondary: #0ea5e9; --zuoekai-plugin-accent: #6366f1; --zuoekai-plugin-success: #10b981; --zuoekai-plugin-warning: #0ea5e9; --zuoekai-plugin-warning-light: rgba(14, 165, 233, 0.1); --zuoekai-plugin-warning-dark: #0284c7; --zuoekai-plugin-error: #ef4444; --zuoekai-plugin-info: #3b82f6; /* 渐变配色 */ --zuoekai-plugin-gradient-primary: linear-gradient(135deg, #2563eb, #0ea5e9); --zuoekai-plugin-gradient-border: linear-gradient(135deg, #2563eb, #0ea5e9); /* 辉光效果 */ --zuoekai-plugin-glow-shadow: 0 0 15px rgba(37, 99, 235, 0.6), 0 0 15px rgba(14, 165, 233, 0.6); /* 弹窗头部背景 */ --zuoekai-plugin-modal-header-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(255, 255, 255, 0.95)); --zuoekai-plugin-dialog-header-bg: linear-gradient(135deg, #2563eb, #0ea5e9); /* 按钮渐变 */ --zuoekai-plugin-btn-primary-bg: linear-gradient(135deg, #2563eb, #0ea5e9); --zuoekai-plugin-btn-secondary-bg: linear-gradient(135deg, #0ea5e9, #06b6d4); --zuoekai-plugin-gradient-accent: linear-gradient(135deg, #06b6d4, #0891b2); /* 阴影颜色 */ --zuoekai-plugin-shadow-primary: rgba(37, 99, 235, 0.3); --zuoekai-plugin-shadow-primary-hover: rgba(37, 99, 235, 0.4); --zuoekai-plugin-shadow-secondary: rgba(14, 165, 233, 0.3); --zuoekai-plugin-shadow-secondary-hover: rgba(14, 165, 233, 0.4); --zuoekai-plugin-shadow-accent: rgba(6, 182, 212, 0.3); --zuoekai-plugin-shadow-accent-hover: rgba(6, 182, 212, 0.4); /* 边框颜色 */ --zuoekai-plugin-border-primary: rgba(37, 99, 235, 0.2); /* 主色辅助颜色 */ --zuoekai-plugin-primary-light: rgba(37, 99, 235, 0.1); --zuoekai-plugin-primary-hover: #1d4ed8; /* 按钮悬停背景 */ --zuoekai-plugin-btn-text-hover-bg: rgba(37, 99, 235, 0.1); --zuoekai-plugin-btn-text-hover-color: #1d4ed8; /* 输入框焦点阴影 */ --zuoekai-plugin-input-focus-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); /* 特殊弹窗类型头部背景 */ --zuoekai-plugin-modal-confirm-header-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(255, 255, 255, 0.95)); --zuoekai-plugin-modal-warning-header-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(255, 255, 255, 0.95)); --zuoekai-plugin-modal-error-header-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(255, 255, 255, 0.95)); --zuoekai-plugin-modal-info-header-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(255, 255, 255, 0.95)); /* 关闭按钮（主题相关） */ --zuoekai-plugin-close-btn-color: #ffffff; --zuoekai-plugin-close-btn-hover-bg: rgba(37, 99, 235, 0.1); --zuoekai-plugin-close-btn-hover-color: #2563eb; /* 滚动条（主题相关） */ --zuoekai-plugin-scrollbar-track-bg: #f1f5f9; --zuoekai-plugin-scrollbar-thumb-hover: #1d4ed8; /* 弹窗标题颜色（主题相关） */ --zuoekai-plugin-modal-title-color: #ffffff; --zuoekai-plugin-dialog-title-color: #ffffff; /* Toast文字颜色（主题相关） */ --zuoekai-plugin-toast-text-color: #ffffff; } /* ==================== 通用变量（所有主题共享） ==================== */ :root { /* 状态颜色（所有主题统一） */ --zuoekai-plugin-success: #10b981; --zuoekai-plugin-success-dark: #059669; --zuoekai-plugin-warning: #f59e0b; --zuoekai-plugin-warning-dark: #d97706; --zuoekai-plugin-error: #ef4444; --zuoekai-plugin-error-dark: #dc2626; --zuoekai-plugin-info: #3b82f6; /* 按钮渐变（状态色） */ --zuoekai-plugin-btn-success-bg: linear-gradient(135deg, #10b981, #059669); --zuoekai-plugin-btn-warning-bg: linear-gradient(135deg, #f59e0b, #d97706); --zuoekai-plugin-btn-danger-bg: linear-gradient(135deg, #ef4444, #dc2626); /* 阴影颜色（状态色） */ --zuoekai-plugin-shadow-success: rgba(16, 185, 129, 0.3); --zuoekai-plugin-shadow-success-hover: rgba(16, 185, 129, 0.4); --zuoekai-plugin-shadow-warning: rgba(245, 158, 11, 0.3); --zuoekai-plugin-shadow-warning-hover: rgba(245, 158, 11, 0.4); --zuoekai-plugin-shadow-danger: rgba(239, 68, 68, 0.3); --zuoekai-plugin-shadow-danger-hover: rgba(239, 68, 68, 0.4); /* ==================== 文本颜色 ==================== */ --zuoekai-plugin-text-primary: #1f2937; --zuoekai-plugin-text-secondary: #6b7280; --zuoekai-plugin-text-tertiary: #9ca3af; --zuoekai-plugin-text-white: #ffffff; --zuoekai-plugin-text-label: #374151; /* ==================== 弹窗通用变量 ==================== */ /* 背景色 */ --zuoekai-plugin-overlay-bg: rgba(0, 0, 0, 0.6); --zuoekai-plugin-content-bg: #ffffff; --zuoekai-plugin-bg-gray-50: #f9fafb; --zuoekai-plugin-bg-gray-100: #f3f4f6; --zuoekai-plugin-bg-gray-700: #374151; --zuoekai-plugin-bg-gray-800: #1f2937; /* 边框 */ --zuoekai-plugin-border-color: #e5e7eb; --zuoekai-plugin-border-light: #f3f4f6; --zuoekai-plugin-border-gray: #d1d5db; --zuoekai-plugin-border-dark: #374151; /* 阴影 */ --zuoekai-plugin-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --zuoekai-plugin-shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.2); --zuoekai-plugin-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --zuoekai-plugin-shadow-drag: 0 10px 50px rgba(0, 0, 0, 0.3); /* 圆角 - 统一为无圆角设计 */ --zuoekai-plugin-radius-none: 0px; --zuoekai-plugin-radius-sm: 4px; --zuoekai-plugin-radius-md: 8px; /* 弹窗头部背景（税务助手粉蓝渐变主题） */ --zuoekai-plugin-modal-header-bg: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(255, 255, 255, 0.95)); --zuoekai-plugin-dialog-header-bg: linear-gradient(135deg, #ec4899 0%, #3b82f6 100%); /* ==================== Modal 专用变量 ==================== */ --zuoekai-plugin-modal-bg: rgba(0, 0, 0, 0.6); --zuoekai-plugin-modal-content-bg: #ffffff; --zuoekai-plugin-modal-border: #e5e7eb; --zuoekai-plugin-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --zuoekai-plugin-modal-radius: 0px; /* ==================== Dialog 专用变量 ==================== */ --zuoekai-plugin-dialog-bg: rgba(0, 0, 0, 0.6); --zuoekai-plugin-dialog-content-bg: #ffffff; --zuoekai-plugin-dialog-border: #e5e7eb; --zuoekai-plugin-dialog-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --zuoekai-plugin-dialog-radius: 0px; /* ==================== Toast 专用变量 ==================== */ --zuoekai-plugin-toast-bg: #ffffff; --zuoekai-plugin-toast-text: #1f2937; --zuoekai-plugin-toast-border: #e5e7eb; --zuoekai-plugin-toast-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2); --zuoekai-plugin-toast-radius: 0px; --zuoekai-plugin-toast-gap: 12px; /* ==================== Dropdown 专用变量 ==================== */ --zuoekai-plugin-dropdown-bg: #ffffff; --zuoekai-plugin-dropdown-text: #1f2937; --zuoekai-plugin-dropdown-border: #e5e7eb; --zuoekai-plugin-dropdown-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2); --zuoekai-plugin-dropdown-radius: 0px; --zuoekai-plugin-dropdown-item-hover: #f3f4f6; /* ==================== Popover 专用变量 ==================== */ --zuoekai-plugin-popover-bg: #ffffff; --zuoekai-plugin-popover-text: #1f2937; --zuoekai-plugin-popover-border: #e5e7eb; --zuoekai-plugin-popover-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2); --zuoekai-plugin-popover-radius: 0px; --zuoekai-plugin-popover-arrow-size: 8px; /* ==================== 动画时间 ==================== */ --zuoekai-plugin-duration-fast: 0.2s; --zuoekai-plugin-duration-normal: 0.3s; --zuoekai-plugin-duration-slow: 0.5s; /* Modal 动画 */ --zuoekai-plugin-modal-duration: 0.3s; --zuoekai-plugin-modal-duration-fast: 0.2s; /* Dialog 动画 */ --zuoekai-plugin-dialog-duration: 0.3s; /* Toast 动画 */ --zuoekai-plugin-toast-duration: 0.3s; /* Dropdown 动画 */ --zuoekai-plugin-dropdown-duration: 0.2s; /* Popover 动画 */ --zuoekai-plugin-popover-duration: 0.2s; /* ==================== 渐变边框效果（税务助手粉蓝渐变主题） ==================== */ --zuoekai-plugin-gradient-border: linear-gradient(135deg, #ec4899 0%, #3b82f6 100%); --zuoekai-plugin-glow-shadow: 0 0 15px rgba(236, 72, 153, 0.6), 0 0 15px rgba(59, 130, 246, 0.6); } /* ==================== 深色模式支持 ==================== */ @media (prefers-color-scheme: dark) { :root { /* 背景色 */ --zuoekai-plugin-content-bg: #1f2937; --zuoekai-plugin-modal-content-bg: #1f2937; --zuoekai-plugin-dialog-content-bg: #1f2937; /* 边框 */ --zuoekai-plugin-border-color: #374151; --zuoekai-plugin-modal-border: #374151; --zuoekai-plugin-dialog-border: #374151; --zuoekai-plugin-toast-border: #374151; --zuoekai-plugin-dropdown-border: #374151; --zuoekai-plugin-popover-border: #374151; /* 文本颜色 */ --zuoekai-plugin-text-primary: #f9fafb; --zuoekai-plugin-text-secondary: #d1d5db; --zuoekai-plugin-text-tertiary: #9ca3af; /* 弹窗标题颜色（深色模式下保持亮色） */ --zuoekai-plugin-modal-title-color: #f9fafb; --zuoekai-plugin-dialog-title-color: #f9fafb; /* Toast/Dropdown/Popover */ --zuoekai-plugin-toast-text: #f9fafb; --zuoekai-plugin-dropdown-text: #f9fafb; --zuoekai-plugin-popover-text: #f9fafb; --zuoekai-plugin-dropdown-item-hover: #374151; } }