:root { /* 主色调:微绿 */ --gg-primary: #059669; --gg-primary-light: #10b981; --gg-primary-dark: #047857; /* 辅助色:深紫 */ --gg-accent: #7c3aed; --gg-accent-light: #8b5cf6; /* 背景色(亮色) */ --gg-bg: #f0fdf4; --gg-bg-card: #ffffff; --gg-bg-elevated: #f1f5f9; --gg-bg-hover: #e2e8f0; /* 文字色 */ --gg-text: #1e293b; --gg-text-secondary: #475569; --gg-text-muted: #94a3b8; /* 边框 */ --gg-border: #e2e8f0; --gg-border-light: #cbd5e1; /* 状态色 */ --gg-success: #10b981; --gg-danger: #ef4444; --gg-warning: #f59e0b; --gg-info: #3b82f6; /* 圆角 */ --gg-radius-sm: 8px; --gg-radius-md: 12px; --gg-radius-lg: 16px; --gg-radius-xl: 20px; /* 阴影 */ --gg-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); --gg-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1); /* 渐变 */ --gg-gradient: linear-gradient(135deg, #059669 0%, #7c3aed 100%); --gg-gradient-green: linear-gradient(135deg, #10b981 0%, #059669 100%); --gg-gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); --gg-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%); /* ── Element Plus 覆盖 ── */ --el-color-primary: #059669; --el-color-primary-light-3: #10b981; --el-color-primary-light-5: #34d399; --el-color-primary-light-7: #6ee7b7; --el-color-primary-light-9: #ecfdf5; --el-color-primary-dark-2: #047857; --el-color-success: #10b981; --el-color-warning: #f59e0b; --el-color-danger: #ef4444; --el-color-info: #64748b; --el-bg-color: #ffffff; --el-bg-color-page: #f0fdf4; --el-bg-color-overlay: #ffffff; --el-text-color-primary: #1e293b; --el-text-color-regular: #334155; --el-text-color-secondary: #64748b; --el-text-color-placeholder: #94a3b8; --el-border-color: #e2e8f0; --el-border-color-light: #f1f5f9; --el-border-color-lighter: #f8fafc; --el-border-color-extra-light: #f0fdf4; --el-fill-color: #f1f5f9; --el-fill-color-light: #f8fafc; --el-fill-color-lighter: #ffffff; --el-fill-color-extra-light: #f0fdf4; --el-fill-color-blank: #ffffff; --el-fill-color-dark: #e2e8f0; --el-mask-color: rgba(0, 0, 0, 0.4); --el-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } /* ── 全局基础 ── */ * { box-sizing: border-box; } body { margin: 0; background: var(--gg-bg); color: var(--gg-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--gg-primary); text-decoration: none; } a:hover { color: var(--gg-accent); } /* ── Element Plus 组件覆盖 ── */ /* Card */ .el-card { background: var(--gg-bg-card) !important; border-color: var(--gg-border) !important; color: var(--gg-text) !important; border-radius: var(--gg-radius-md) !important; } .el-card__header { border-color: var(--gg-border) !important; color: var(--gg-text) !important; } /* Dialog */ .el-dialog { background: var(--gg-bg-card) !important; border: 1px solid var(--gg-border) !important; border-radius: var(--gg-radius-lg) !important; } .el-dialog__header { color: var(--gg-text) !important; } .el-dialog__title { color: var(--gg-text) !important; } /* Input */ .el-input__wrapper { background: #ffffff !important; box-shadow: 0 0 0 1px var(--gg-border) inset !important; border-radius: var(--gg-radius-sm) !important; } .el-input__wrapper:hover { box-shadow: 0 0 0 1px var(--gg-border-light) inset !important; } .el-input__wrapper.is-focus { box-shadow: 0 0 0 1px var(--gg-primary) inset !important; } .el-input__inner { color: var(--gg-text) !important; } .el-input__inner::placeholder { color: var(--gg-text-muted) !important; } .el-textarea__inner { background: #ffffff !important; color: var(--gg-text) !important; border-color: var(--gg-border) !important; } /* Dropdown */ .el-dropdown-menu { background: var(--gg-bg-card) !important; border-color: var(--gg-border) !important; border-radius: var(--gg-radius-md) !important; padding: 6px !important; box-shadow: var(--gg-shadow-lg) !important; } .el-dropdown-menu__item { color: var(--gg-text) !important; border-radius: var(--gg-radius-sm) !important; padding: 8px 14px !important; } .el-dropdown-menu__item:hover { background: var(--gg-bg-hover) !important; color: var(--gg-primary) !important; } .el-dropdown-menu__item--divided::before { background: var(--gg-border) !important; } /* Drawer */ .el-drawer { background: var(--gg-bg-card) !important; } .el-drawer__header { color: var(--gg-text) !important; border-bottom: 1px solid var(--gg-border); margin-bottom: 0 !important; padding: 16px 20px !important; } .el-drawer__body { padding: 20px !important; } /* Button */ .el-button--primary { background: var(--gg-gradient-green) !important; border: none !important; border-radius: var(--gg-radius-sm) !important; } .el-button--primary:hover { opacity: 0.9; } .el-button--default { background: var(--gg-bg-card) !important; border-color: var(--gg-border) !important; color: var(--gg-text) !important; border-radius: var(--gg-radius-sm) !important; } .el-button--default:hover { border-color: var(--gg-primary) !important; color: var(--gg-primary) !important; } /* Badge */ .el-badge__content { background-color: var(--gg-danger) !important; border: none !important; } /* Tag */ .el-tag { border-radius: 6px !important; } /* Message */ .el-message { background: var(--gg-bg-card) !important; border-color: var(--gg-border) !important; border-radius: var(--gg-radius-md) !important; box-shadow: var(--gg-shadow-lg) !important; } .el-message__content { color: var(--gg-text) !important; } /* Pagination */ .el-pagination { --el-pagination-button-bg-color: var(--gg-bg-elevated); --el-pagination-hover-color: var(--gg-primary); } .el-pager li { background: var(--gg-bg-elevated) !important; color: var(--gg-text-secondary) !important; } .el-pager li.is-active { background: var(--gg-gradient-green) !important; color: white !important; } /* Select */ .el-select-dropdown { background: var(--gg-bg-card) !important; border-color: var(--gg-border) !important; } .el-select-dropdown__item { color: var(--gg-text) !important; } .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { background: var(--gg-bg-hover) !important; } .el-select-dropdown__item.selected { color: var(--gg-primary) !important; } /* Checkbox */ .el-checkbox { color: var(--gg-text) !important; } .el-checkbox__label { color: var(--gg-text) !important; } /* Time Picker */ .el-time-panel { background: var(--gg-bg-card) !important; border-color: var(--gg-border) !important; } /* MessageBox */ .el-message-box { background: var(--gg-bg-card) !important; border-color: var(--gg-border) !important; } .el-message-box__title { color: var(--gg-text) !important; } .el-message-box__message { color: var(--gg-text-secondary) !important; } /* Loading */ .el-loading-mask { background: rgba(240, 253, 244, 0.8) !important; } /* ── 工具类 ── */ .gg-gradient { background: var(--gg-gradient); } .gg-glow { box-shadow: 0 0 20px rgba(5, 150, 105, 0.2); } .gg-card { background: var(--gg-bg-card); border: 1px solid var(--gg-border); border-radius: var(--gg-radius-md); padding: 20px; transition: border-color 0.2s, box-shadow 0.2s; } .gg-card:hover { border-color: var(--gg-primary); box-shadow: 0 0 20px rgba(5, 150, 105, 0.1); } .gg-text-gradient { background: var(--gg-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gg-status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } .gg-status-dot--idle { background: var(--gg-success); box-shadow: 0 0 6px var(--gg-success); } .gg-status-dot--working { background: var(--gg-danger); box-shadow: 0 0 6px var(--gg-danger); } .gg-status-dot--in_team { background: var(--gg-info); box-shadow: 0 0 6px var(--gg-info); } .gg-status-dot--away { background: var(--gg-text-muted); } /* 滚动条 */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--gg-border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--gg-border-light); }