/* ============================================================ GEO 企业端 · 犀牛卫（Hermes）主题覆盖层 ------------------------------------------------------------ 来源：E:\hermes\hermes\hermes-ui-desktop\frontend\src\styles.css 的设计变量 主色 #0F6E56 主色浅底 #E1F5EE 悬停底 #F0F7F4 页面渐变 linear-gradient(180deg,#F6FAF8,#EAF5F0 40%,#E0EFE8) 文字 #1A1A18 / #6B6B68 / #A0A09D 危险 #E8637A 圆角 6 / 8 / 12 / 16px 说明：纯样式覆盖，不改任何 JS / 后端 / 数据库。 只用 :root:root 提高优先级，压过运行时注入的 #__vben_design_styles__。 回滚：删掉 index.html 里的 （或本文件）即可。 ============================================================ */ /* ---------- 1. 设计变量（Vben 令牌 + Element Plus 令牌） ---------- */ html:not(.dark):root:root { /* 主色：犀牛卫绿 ⚠ 这几项被应用以「内联样式写在 上」，必须带 !important 才能压住 */ --primary: 164.8 76% 24.5% !important; /* #0F6E56 */ --primary-foreground: 0 0% 100%; --ring: 164.8 76% 24.5% !important; /* 表面与文字 */ --background: 0 0% 100%; --background-deep: 154.3 30.4% 95.5%; /* #F0F7F4 页面底色 */ --foreground: 60 4% 9.8%; /* #1A1A18 */ --card: 0 0% 100%; --card-foreground: 60 4% 9.8%; --popover: 0 0% 100%; --popover-foreground: 60 4% 9.8%; --muted: 154.3 30.4% 95.5%; --muted-foreground: 60 1.4% 41.4%; /* #6B6B68 */ /* 描边与输入 */ --border: 162.9 22.6% 93.9%; /* rgba(15,110,86,.08) 的白底等效色 */ --input: 162.9 22.6% 93.9%; --input-background: 0 0% 100%; --input-placeholder: 60 1.6% 62.2%; /* #A0A09D */ /* 侧栏 / 顶栏 */ --sidebar: 0 0% 100%; --sidebar-deep: 150 28.6% 97.3%; /* #F6FAF8 */ --menu: var(--sidebar); --header: 0 0% 100%; /* 辅助色 / 状态色 */ --secondary: 154.3 30.4% 96%; --secondary-foreground: 60 4% 9.8%; --accent: 154.3 30.4% 95.5%; /* 菜单悬停底 */ --accent-dark: 152 30.6% 90.4%; /* #DFEEE7 */ --accent-darker: 151.6 29.2% 87.3%; /* #D5E8DF */ --accent-lighter: 150 28.6% 97.3%; /* #F6FAF8 */ --accent-hover: 151.6 29.2% 87.3%; --accent-foreground: 164.8 76% 20%; --heavy: 152 24% 92%; --success: 163 55.7% 39.8% !important; /* #2D9E7E */ --destructive: 349.6 74.3% 64.9% !important; /* #E8637A */ /* 圆角（犀牛卫以 8px 为主、卡片 12px） */ --radius: 8px !important; /* Element Plus：主色与色阶（覆盖运行时注入的蓝色 #006BE6） */ --el-color-primary: #0F6E56; --el-color-primary-rgb: 15, 110, 86; --el-color-primary-light-1: #277D67; --el-color-primary-light-2: #3F8B78; --el-color-primary-light-3: #579989; --el-color-primary-light-4: #6FA89A; --el-color-primary-light-5: #87B6AA; --el-color-primary-light-6: #9FC5BB; --el-color-primary-light-7: #B7D4CC; --el-color-primary-light-8: #CFE2DD; --el-color-primary-light-9: #E7F0ED; --el-color-primary-dark-2: #0C5845; --el-bg-color-page: #F0F7F4; --el-border-color: #E4EFEA; --el-border-color-light: #E4EFEA; --el-border-color-lighter: #EDF5F1; --el-border-color-extra-light: #F2F8F5; --el-border-color-dark: #D5E8DF; --el-border-color-hover: #CFE2DD; --el-border-radius-base: 8px; --el-text-color-primary: #1A1A18; --el-text-color-regular: #3F4A46; --el-text-color-secondary: #6B6B68; --el-text-color-placeholder: #A0A09D; --el-fill-color-light: #F4FAF7; --el-fill-color-lighter: #F8FCFA; --el-fill-color-blank: #FFFFFF; --el-table-header-bg-color: #F2F9F6; --el-table-header-text-color: #3F4A46; --el-table-row-hover-bg-color: #F4FAF7; --el-menu-active-color: #0F6E56; --el-color-success: #2D9E7E; --el-color-success-light-3: #6CBBA4; --el-color-success-light-5: #96CEBE; --el-color-success-light-7: #C0E2D8; --el-color-success-light-8: #D5EBE4; --el-color-success-light-9: #EAF5F1; --el-overlay-color-lighter: rgba(15, 110, 86, 0.10); } /* ---------- 2. 侧栏：浅绿渐变 ---------- 构建产物里的原规则是 `html:not(.dark) aside.fixed.border-r.border-border.bg-sidebar { background:#fff!important }`（5 类 + 2 元素），本文件加载在它之前， 所以必须用「更高优先级」而不是「同优先级靠后」来覆盖。 */ html:not(.dark) body aside.bg-sidebar.bg-sidebar.fixed.border-r.border-border, html:not(.dark) body aside.bg-sidebar.bg-sidebar.fixed.border-r.border-border.bg-sidebar-deep { background-color: #F7FBF9 !important; background-image: linear-gradient(180deg, #F6FAF8 0%, #EAF5F0 40%, #E0EFE8 100%) !important; } /* 菜单：选中 / 悬停 构建产物里的原规则是 `.vben-menu.is-vertical .menu-section-block .vben-menu-item.is-active { box-shadow:inset 3px 0 0 #C0C4CC; background:#EEE!important; color:#1E293B }`（5 类）， 这里用 6 类 + 2 元素压过它，并把左侧指示条改成主色绿。 */ html:not(.dark) body .vben-menu.is-vertical .menu-section-block .vben-menu-item.is-active, html:not(.dark) body .vben-menu.is-vertical .menu-section-block .vben-sub-menu-content.is-active { background: #E1F5EE !important; color: #0F6E56 !important; box-shadow: inset 3px 0 0 #0F6E56 !important; } html:not(.dark) body .vben-menu.is-vertical .menu-section-block .vben-menu-item:not(.is-active):hover, html:not(.dark) body .vben-menu.is-vertical .menu-section-block .vben-sub-menu-content:not(.is-active):hover { background: #F0F7F4 !important; color: #0F6E56 !important; } html:not(.dark) body .vben-menu .vben-menu-item.is-active .vben-menu__name, html:not(.dark) body .vben-menu .vben-menu-item.is-active .vben-menu__icon { color: #0F6E56 !important; } /* ---------- 3. 顶栏 / 标签页 ---------- */ html header.bg-header, html .bg-header { background-color: #FFFFFF !important; border-bottom: 1px solid #E4EFEA !important; } html .tabs-chrome__background-content { background-color: #EAF5F0 !important; } html .vben-breadcrumb { color: #6B6B68; } /* ---------- 4. 卡片 / 圆角 / 描边 ---------- */ html .el-card { border-radius: 12px !important; border-color: #E4EFEA !important; box-shadow: 0 1px 3px rgba(15, 110, 86, 0.06) !important; } html .el-button { border-radius: 8px; } html .el-input__wrapper, html .el-textarea__inner, html .el-select__wrapper { border-radius: 8px; } html .el-dialog, html .el-drawer, html .el-message-box, html .el-popover { border-radius: 12px; } html .el-tag { border-radius: 6px; } /* 表格：表头浅薄荷，行悬停极浅绿 */ html .el-table th.el-table__cell { background-color: #F2F9F6 !important; color: #3F4A46 !important; } html .el-table td.el-table__cell, html .el-table th.el-table__cell { border-bottom-color: #EAF2EE !important; } /* 分页 / 开关等控件跟随主色 */ html .el-pagination.is-background .el-pager li.is-active { background-color: #0F6E56 !important; border-color: #0F6E56 !important; } /* ---------- 5. 页面底色 / 滚动条 ---------- */ html body { background-color: #F0F7F4; } /* ---------- 6. 卡片顶部 2px 装饰线：彩虹渐变 → 主色绿族 ---------- */ html:not(.dark) body .card::before { background: linear-gradient(90deg, #0F6E56, #17795E, #2D9E7E, #4BBF9C, #2D9E7E, #17795E, #0F6E56) !important; } /* ---------- 7. 工作台指标卡：彩色渐变 → 主色绿族 ---------- */ html:not(.dark) body .indicator-icon.icon-purple { background: linear-gradient(135deg, #0F6E56, #17795E) !important; box-shadow: 0 0 15px rgba(15, 110, 86, 0.28) !important; color: #fff !important; } html:not(.dark) body .indicator-icon.icon-blue { background: linear-gradient(135deg, #17795E, #1E8A6A) !important; box-shadow: 0 0 15px rgba(23, 121, 94, 0.28) !important; color: #fff !important; } html:not(.dark) body .indicator-icon.icon-green, html:not(.dark) body .indicator-icon.icon-green-light { background: linear-gradient(135deg, #2D9E7E, #35AE8B) !important; box-shadow: 0 0 15px rgba(45, 158, 126, 0.28) !important; color: #fff !important; } html:not(.dark) body .indicator-icon.icon-orange { background: linear-gradient(135deg, #35AE8B, #4BBF9C) !important; box-shadow: 0 0 15px rgba(53, 174, 139, 0.28) !important; color: #fff !important; } html:not(.dark) body .indicator-icon.icon-pink { background: linear-gradient(135deg, #0C5845, #0F6E56) !important; box-shadow: 0 0 15px rgba(12, 88, 69, 0.28) !important; color: #fff !important; } html:not(.dark) body .indicator-value.number { background: linear-gradient(90deg, #0F6E56, #2D9E7E) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ---------- 8. 滚动条 ---------- */ /* ---------- 8. 零散紫色点缀（登录页平台卡、报表图标等）→ 主色绿族 ---------- */ html:not(.dark) body .platform-section .platform-card { background-image: linear-gradient(135deg, rgba(15, 110, 86, 0.58), rgba(45, 158, 126, 0.42)) !important; } html:not(.dark) body .gradient-purple, html:not(.dark) body .icon-purple, html:not(.dark) body .metric-icon-wrap.icon-purple, html:not(.dark) body .hero-icon, html:not(.dark) body .nav-icon { background: linear-gradient(135deg, #0F6E56, #17795E) !important; color: #fff !important; box-shadow: 0 0 15px rgba(15, 110, 86, 0.26) !important; } /* ---------- 9. 滚动条 ---------- */ html ::-webkit-scrollbar { width: 8px; height: 8px; } /* ---------- 10. 工作台「快速导航」：修正写死列宽导致的溢出与文字截断 ---------- 原样式：.nav-grid{grid-template-columns:150px 150px 150px}（需要 478px） .nav-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}（只有 64px 宽） 在窄栏（约 333px）里会：第 3 个卡片被裁、第 4 个掉到下一行、标题被截成「查看关键词…」 */ html:not(.dark) .dashboard-theme-wrapper .nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; } html:not(.dark) .dashboard-theme-wrapper .nav-item { min-width: 0; padding: 12px 14px !important; } html:not(.dark) .dashboard-theme-wrapper .nav-content { min-width: 0; flex: 1 1 auto; } html:not(.dark) .dashboard-theme-wrapper .nav-name, html:not(.dark) .dashboard-theme-wrapper .nav-desc { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.3; overflow-wrap: anywhere; } html ::-webkit-scrollbar-track { background: transparent; } html ::-webkit-scrollbar-thumb { background: #CFE2DD; border-radius: 4px; } html ::-webkit-scrollbar-thumb:hover { background: #B7D4CC; } /* ================= 局部布局修正 ================= */ /* 蒸馏词（AI 关键词拓展）搜索栏： 组件模板里「优化目标」内联写死 width:280px，「关键词」由页面自带 CSS 定为 600px， 两者宽窄悬殊、占位文字还会被截断。这里统一成同宽（同行的数量框与按钮本就是 size=large， 高度一致），只覆盖宽度，其余样式不动。 */ .zhengliu .search-bar .search-input { width: 340px !important; }