/* * ============================================================ * 配色方案 (Color Schemes) —— 7 套主题 * * 通过切换。 * theme-0：系统原生，不覆盖任何颜色 * 其余方案用两种颜色实现多处修改： * color1：二级/三级菜单背景色（.sub-menu） * color2：折叠态菜单背景色 + 按钮背景色 * * 方案对照（给 body 的 class）： * theme-0 系统原生不覆盖任何颜色，使用系统默认样式 * theme-1 科技蓝 #2B6BC8 / #3D8BFF * theme-2 科技青 #167D7D / #1FA3A0 * theme-3 电路板绿 #1E6E4A / #27A168 * theme-4 藏青金 #263B7A / #D9A441 * theme-5 紫兰 #3A3A7A / #6A5BE0 * theme-6 雾灰蓝 #4A6E8E / #5C9DD6 * * 默认方案由 sidebar-theme-config.js 中的 SIDEBAR_DEFAULT_THEME 决定。 * ============================================================ */ /* ============================================================ * theme-0：系统原生 — 不设置任何颜色覆盖 * 所有颜色规则都以 body.theme-1~6 开头， * body.theme-0 无匹配规则，自然使用系统原生样式。 * ============================================================ */ /* ============================================================ * CSS 变量 * ============================================================ */ body.theme-1 { --c1: #2B6BC8; --c2: #3D8BFF; } body.theme-2 { --c1: #167A7D; --c2: #1FA3A0; } body.theme-3 { --c1: #1E6E4A; --c2: #27A168; } body.theme-4 { --c1: #263B7A; --c2: #D9A441; } body.theme-5 { --c1: #3A3A7A; --c2: #6A5BE0; } body.theme-6 { --c1: #4A6E8E; --c2: #5C9DD6; } /* ============================================================ * 1. 折叠态菜单背景色 = color2 + 字体白色加粗 * （折叠态为窄条，一级菜单首字竖排） * ============================================================ */ body.theme-1 #header_con_id.menu-collapsed { background: #3D8BFF !important; } body.theme-2 #header_con_id.menu-collapsed { background: #1FA3A0 !important; } body.theme-3 #header_con_id.menu-collapsed { background: #27A168 !important; } body.theme-4 #header_con_id.menu-collapsed { background: #D9A441 !important; } body.theme-5 #header_con_id.menu-collapsed { background: #6A5BE0 !important; } body.theme-6 #header_con_id.menu-collapsed { background: #5C9DD6 !important; } /* 折叠态 .main-menu 背景 = color2（与竖条底色统一） */ body.theme-1 #header_con_id.menu-collapsed .main-menu { background: #3D8BFF !important; } body.theme-2 #header_con_id.menu-collapsed .main-menu { background: #1FA3A0 !important; } body.theme-3 #header_con_id.menu-collapsed .main-menu { background: #27A168 !important; } body.theme-4 #header_con_id.menu-collapsed .main-menu { background: #D9A441 !important; } body.theme-5 #header_con_id.menu-collapsed .main-menu { background: #6A5BE0 !important; } body.theme-6 #header_con_id.menu-collapsed .main-menu { background: #5C9DD6 !important; } /* 折叠态一级菜单文字区域背景 = color2（与竖条底色统一） */ body.theme-1 #header_con_id.menu-collapsed .main-menu li a { background: #3D8BFF !important; font-weight: 700 !important; } body.theme-2 #header_con_id.menu-collapsed .main-menu li a { background: #1FA3A0 !important; font-weight: 700 !important; } body.theme-3 #header_con_id.menu-collapsed .main-menu li a { background: #27A168 !important; font-weight: 700 !important; } body.theme-4 #header_con_id.menu-collapsed .main-menu li a { background: #D9A441 !important; font-weight: 700 !important; } body.theme-5 #header_con_id.menu-collapsed .main-menu li a { background: #6A5BE0 !important; font-weight: 700 !important; } body.theme-6 #header_con_id.menu-collapsed .main-menu li a { background: #5C9DD6 !important; font-weight: 700 !important; } /* 折叠态一级菜单 hover 背景 = color2 稍亮 */ body.theme-1 #header_con_id.menu-collapsed .main-menu li a:hover { background: #5A9FFF !important; } body.theme-2 #header_con_id.menu-collapsed .main-menu li a:hover { background: #2BC0BD !important; } body.theme-3 #header_con_id.menu-collapsed .main-menu li a:hover { background: #30BF7E !important; } body.theme-4 #header_con_id.menu-collapsed .main-menu li a:hover { background: #E8B85A !important; } body.theme-5 #header_con_id.menu-collapsed .main-menu li a:hover { background: #8578F0 !important; } body.theme-6 #header_con_id.menu-collapsed .main-menu li a:hover { background: #74B5E8 !important; } /* 折叠态首字：color2字体 + 白色背景圆圈 */ body.theme-1 #header_con_id.menu-collapsed .main-menu li a::first-letter { color: #3D8BFF !important; background: #ffffff !important; font-weight: 700 !important; } body.theme-2 #header_con_id.menu-collapsed .main-menu li a::first-letter { color: #1FA3A0 !important; background: #ffffff !important; font-weight: 700 !important; } body.theme-3 #header_con_id.menu-collapsed .main-menu li a::first-letter { color: #27A168 !important; background: #ffffff !important; font-weight: 700 !important; } body.theme-4 #header_con_id.menu-collapsed .main-menu li a::first-letter { color: #D9A441 !important; background: #ffffff !important; font-weight: 700 !important; } body.theme-5 #header_con_id.menu-collapsed .main-menu li a::first-letter { color: #6A5BE0 !important; background: #ffffff !important; font-weight: 700 !important; } body.theme-6 #header_con_id.menu-collapsed .main-menu li a::first-letter { color: #5C9DD6 !important; background: #ffffff !important; font-weight: 700 !important; } /* ============================================================ * 2. 二级/三级菜单背景色 = color1 * ============================================================ */ body.theme-1 .sub-menu .menu { background: #2B6BC8 !important; } body.theme-2 .sub-menu .menu { background: #167A7D !important; } body.theme-3 .sub-menu .menu { background: #1E6E4A !important; } body.theme-4 .sub-menu .menu { background: #263B7A !important; } body.theme-5 .sub-menu .menu { background: #3A3A7A !important; } body.theme-6 .sub-menu .menu { background: #4A6E8E !important; } /* ============================================================ * 3. 按钮背景色 = color2（框架按钮通用） * ============================================================ */ body.theme-1 .item-rbtn-blue, body.theme-1 .item-rbtn-red, body.theme-1 .item-rbtn-green, body.theme-1 .frame-btn, body.theme-1 .btn-business { background: #3D8BFF !important; } body.theme-2 .item-rbtn-blue, body.theme-2 .item-rbtn-red, body.theme-2 .item-rbtn-green, body.theme-2 .frame-btn, body.theme-2 .btn-business { background: #1FA3A0 !important; } body.theme-3 .item-rbtn-blue, body.theme-3 .item-rbtn-red, body.theme-3 .item-rbtn-green, body.theme-3 .frame-btn, body.theme-3 .btn-business { background: #27A168 !important; } body.theme-4 .item-rbtn-blue, body.theme-4 .item-rbtn-red, body.theme-4 .item-rbtn-green, body.theme-4 .frame-btn, body.theme-4 .btn-business { background: #D9A441 !important; } body.theme-5 .item-rbtn-blue, body.theme-5 .item-rbtn-red, body.theme-5 .item-rbtn-green, body.theme-5 .frame-btn, body.theme-5 .btn-business { background: #6A5BE0 !important; } body.theme-6 .item-rbtn-blue, body.theme-6 .item-rbtn-red, body.theme-6 .item-rbtn-green, body.theme-6 .frame-btn, body.theme-6 .btn-business { background: #5C9DD6 !important; } /* ============================================================ * 4. .refresh-btn 背景色+边框色 = color2 * ============================================================ */ body.theme-1 .refresh-btn { background: #3D8BFF !important; border-color: #3D8BFF !important; } body.theme-2 .refresh-btn { background: #1FA3A0 !important; border-color: #1FA3A0 !important; } body.theme-3 .refresh-btn { background: #27A168 !important; border-color: #27A168 !important; } body.theme-4 .refresh-btn { background: #D9A441 !important; border-color: #D9A441 !important; } body.theme-5 .refresh-btn { background: #6A5BE0 !important; border-color: #6A5BE0 !important; } body.theme-6 .refresh-btn { background: #5C9DD6 !important; border-color: #5C9DD6 !important; } /* ============================================================ * 5. .main-tab .strips-bar 背景色 = color1 * ============================================================ */ body.theme-1 .main-tab .strips-bar { background: #2B6BC8 !important; } body.theme-2 .main-tab .strips-bar { background: #167A7D !important; } body.theme-3 .main-tab .strips-bar { background: #1E6E4A !important; } body.theme-4 .main-tab .strips-bar { background: #263B7A !important; } body.theme-5 .main-tab .strips-bar { background: #3A3A7A !important; } body.theme-6 .main-tab .strips-bar { background: #4A6E8E !important; } /* ============================================================ * 6. .main-tab .item-tab-strip .active 背景色 = color2 * ============================================================ */ body.theme-1 .main-tab .item-tab-strip .active { background: #3D8BFF !important; } body.theme-2 .main-tab .item-tab-strip .active { background: #1FA3A0 !important; } body.theme-3 .main-tab .item-tab-strip .active { background: #27A168 !important; } body.theme-4 .main-tab .item-tab-strip .active { background: #D9A441 !important; } body.theme-5 .main-tab .item-tab-strip .active { background: #6A5BE0 !important; } body.theme-6 .main-tab .item-tab-strip .active { background: #5C9DD6 !important; } /* ============================================================ * 7. #edit 背景色+边框色 = color2 * ============================================================ */ body.theme-1 #edit { background: #3D8BFF !important; border-color: #3D8BFF !important; } body.theme-2 #edit { background: #1FA3A0 !important; border-color: #1FA3A0 !important; } body.theme-3 #edit { background: #27A168 !important; border-color: #27A168 !important; } body.theme-4 #edit { background: #D9A441 !important; border-color: #D9A441 !important; } body.theme-5 #edit { background: #6A5BE0 !important; border-color: #6A5BE0 !important; } body.theme-6 #edit { background: #5C9DD6 !important; border-color: #5C9DD6 !important; } /* ============================================================ * 8. .common-used-function-title / .trade-state-label-title * 背景色 = color1，字体白色 * ============================================================ */ body.theme-1 .common-used-function-title, body.theme-1 .trade-state-label-title { background: #2B6BC8 !important; color: #ffffff !important; } body.theme-2 .common-used-function-title, body.theme-2 .trade-state-label-title { background: #167A7D !important; color: #ffffff !important; } body.theme-3 .common-used-function-title, body.theme-3 .trade-state-label-title { background: #1E6E4A !important; color: #ffffff !important; } body.theme-4 .common-used-function-title, body.theme-4 .trade-state-label-title { background: #263B7A !important; color: #ffffff !important; } body.theme-5 .common-used-function-title, body.theme-5 .trade-state-label-title { background: #3A3A7A !important; color: #ffffff !important; } body.theme-6 .common-used-function-title, body.theme-6 .trade-state-label-title { background: #4A6E8E !important; color: #ffffff !important; } /* ============================================================ * 9. .trade-state-label-title ul 字体白色 * ============================================================ */ .trade-state-label-title ul { color: #ffffff !important; } /* ============================================================ * 10. .btn 按钮（forgotPassword / forgot_password_help） * 背景 = color2，字体白色，边框色 = color2 * ============================================================ */ body.theme-1 .btn { background: #3D8BFF !important; color: #ffffff !important; border-color: #3D8BFF !important; } body.theme-2 .btn { background: #1FA3A0 !important; color: #ffffff !important; border-color: #1FA3A0 !important; } body.theme-3 .btn { background: #27A168 !important; color: #ffffff !important; border-color: #27A168 !important; } body.theme-4 .btn { background: #D9A441 !important; color: #ffffff !important; border-color: #D9A441 !important; } body.theme-5 .btn { background: #6A5BE0 !important; color: #ffffff !important; border-color: #6A5BE0 !important; } body.theme-6 .btn { background: #5C9DD6 !important; color: #ffffff !important; border-color: #5C9DD6 !important; } /* ============================================================ * 11. .login_btn 按钮（login页面 + FND9100注册页面） * 背景 = color2，字体白色，边框色 = color2 * ============================================================ */ body.theme-1 .login_btn { background: #3D8BFF !important; color: #ffffff !important; border-color: #3D8BFF !important; } body.theme-2 .login_btn { background: #1FA3A0 !important; color: #ffffff !important; border-color: #1FA3A0 !important; } body.theme-3 .login_btn { background: #27A168 !important; color: #ffffff !important; border-color: #27A168 !important; } body.theme-4 .login_btn { background: #D9A441 !important; color: #ffffff !important; border-color: #D9A441 !important; } body.theme-5 .login_btn { background: #6A5BE0 !important; color: #ffffff !important; border-color: #6A5BE0 !important; } body.theme-6 .login_btn { background: #5C9DD6 !important; color: #ffffff !important; border-color: #5C9DD6 !important; } /* ============================================================ * 12. .selected / .unselected（login_bg_news / login_compliance_news tab） * .selected 背景 = color2，字体白色 * .unselected 背景 = color1，字体白色 * ============================================================ */ body.theme-1 .selected { background: #3D8BFF !important; color: #ffffff !important; } body.theme-2 .selected { background: #1FA3A0 !important; color: #ffffff !important; } body.theme-3 .selected { background: #27A168 !important; color: #ffffff !important; } body.theme-4 .selected { background: #D9A441 !important; color: #ffffff !important; } body.theme-5 .selected { background: #6A5BE0 !important; color: #ffffff !important; } body.theme-6 .selected { background: #5C9DD6 !important; color: #ffffff !important; } body.theme-1 .unselected { background: #2B6BC8 !important; color: #ffffff !important; } body.theme-2 .unselected { background: #167A7D !important; color: #ffffff !important; } body.theme-3 .unselected { background: #1E6E4A !important; color: #ffffff !important; } body.theme-4 .unselected { background: #263B7A !important; color: #ffffff !important; } body.theme-5 .unselected { background: #3A3A7A !important; color: #ffffff !important; } body.theme-6 .unselected { background: #4A6E8E !important; color: #ffffff !important; } /* ============================================================ * 13. .search-pl .search-btns > span 搜索按钮 * 背景 = color2，字体白色 * ============================================================ */ body.theme-1 .search-pl .search-btns > span { background: #3D8BFF !important; color: #ffffff !important; } body.theme-2 .search-pl .search-btns > span { background: #1FA3A0 !important; color: #ffffff !important; } body.theme-3 .search-pl .search-btns > span { background: #27A168 !important; color: #ffffff !important; } body.theme-4 .search-pl .search-btns > span { background: #D9A441 !important; color: #ffffff !important; } body.theme-5 .search-pl .search-btns > span { background: #6A5BE0 !important; color: #ffffff !important; } body.theme-6 .search-pl .search-btns > span { background: #5C9DD6 !important; color: #ffffff !important; }