/* ============================================================================ brand.css — new-api 深空科技风皮肤覆盖 (Semi Design) 注入方式：Caddy 将本文件注入到所有页面 设计：近黑深空底 #07080d + 亮蓝主色 + 品牌红点睛 + 深色玻璃卡片 原则：只改颜色/背景/边框/字体/阴影，绝不改尺寸/定位/布局 ============================================================================ */ /* --------------------------------------------------------------------------- 字体引入（Google Fonts） --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap'); /* ============================================================================ 1. 设计令牌（统一变量，落地页一致） ============================================================================ */ :root, body { /* —— 品牌色板 —— */ --brand-bg: #07080d; /* 近黑深空底 */ --brand-bg-rise-1: #0b0d16; /* 略抬升表面 */ --brand-bg-rise-2: #11131f; /* 卡片/面板底 */ --brand-bg-rise-3: #171a29; /* 更高表面/hover */ --brand-bg-rise-4: #1f2335; /* 弹层/悬浮最高层 */ --brand-blue: #4d8dff; /* 主色 亮蓝 */ --brand-blue-strong: #5b8cff; /* 主色（亮态） */ --brand-blue-hover: #6ea0ff; /* hover */ --brand-blue-active: #3b7af0; /* active */ --brand-blue-soft: rgba(77, 141, 255, 0.16); /* light 背景 */ --brand-blue-softer: rgba(77, 141, 255, 0.10); --brand-blue-disabled: rgba(77, 141, 255, 0.35); --brand-red: #ff3b52; /* 点睛 品牌红 */ --brand-red-hover: #ff5266; --brand-red-soft: rgba(255, 59, 82, 0.16); /* —— 文字 —— */ --brand-text-0: #e8ecf5; /* 主文字 */ --brand-text-1: #9aa3b5; /* 次文字 */ --brand-text-2: #5e6675; /* 更次/占位 */ /* —— 描边/分隔 —— */ --brand-border: rgba(255, 255, 255, 0.08); /* 主边框 #ffffff14 ≈ 0.08 */ --brand-hairline: rgba(255, 255, 255, 0.07); /* 发丝线 #ffffff12 */ --brand-glass: rgba(255, 255, 255, 0.04); /* 玻璃面板底叠加 */ --brand-glow: 0 0 0 1px rgba(77, 141, 255, 0.25), 0 8px 28px rgba(77, 141, 255, 0.14); --brand-radius: 10px; /* —— 字体栈 —— */ --brand-font-sans: 'Sora', 'Space Grotesk', 'Noto Sans SC', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --brand-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ======================================================================== Semi Design 核心 CSS 变量覆盖 Semi 颜色变量为 "R, G, B" 三元组（供 rgba(var(--x), a) 使用） ======================================================================== */ /* —— 背景表面：从深到浅 —— */ --semi-color-bg-0: 7, 8, 13; /* #07080d 最底 */ --semi-color-bg-1: 11, 13, 22; /* #0b0d16 */ --semi-color-bg-2: 17, 19, 31; /* #11131f 卡片 */ --semi-color-bg-3: 23, 26, 41; /* #171a29 hover/高层 */ --semi-color-bg-4: 31, 35, 53; /* #1f2335 弹层 */ /* —— 填充（按钮次级底/输入底/选中底）—— */ --semi-color-fill-0: 255, 255, 255; /* 透明度由 Semi 控制，调浅以适配深底 */ --semi-color-fill-1: 255, 255, 255; --semi-color-fill-2: 255, 255, 255; /* —— 文本 —— */ --semi-color-text-0: 232, 236, 245; /* #e8ecf5 主 */ --semi-color-text-1: 154, 163, 181; /* #9aa3b5 次 */ --semi-color-text-2: 94, 102, 117; /* #5e6675 更次 */ --semi-color-text-3: 94, 102, 117; /* 占位 */ /* —— 边框 —— */ --semi-color-border: 255, 255, 255; /* 配合低透明度形成发丝线 */ /* —— 主色（品牌蓝）—— */ --semi-color-primary: 77, 141, 255; /* #4d8dff */ --semi-color-primary-hover: 110, 160, 255; /* #6ea0ff */ --semi-color-primary-active: 59, 122, 240; /* #3b7af0 */ --semi-color-primary-light-default: 77, 141, 255; --semi-color-primary-light-hover: 110, 160, 255; --semi-color-primary-light-active: 59, 122, 240; --semi-color-primary-disabled: 77, 141, 255; /* —— 链接 —— */ --semi-color-link: 110, 160, 255; --semi-color-link-hover: 140, 180, 255; --semi-color-link-active: 77, 141, 255; --semi-color-link-visited: 110, 160, 255; /* —— 语义色（与深底协调）—— */ --semi-color-success: 46, 204, 138; --semi-color-success-light-default: 46, 204, 138; --semi-color-warning: 255, 176, 32; --semi-color-warning-light-default: 255, 176, 32; --semi-color-danger: 255, 59, 82; /* 品牌红 */ --semi-color-danger-hover: 255, 82, 102; --semi-color-danger-active: 230, 48, 70; --semi-color-danger-light-default: 255, 59, 82; --semi-color-info: 77, 141, 255; --semi-color-info-light-default: 77, 141, 255; /* —— 焦点 / 阴影 / 高亮 —— */ --semi-color-focus-border: 77, 141, 255; --semi-color-highlight-bg: 255, 59, 82; --semi-color-highlight: 232, 236, 245; --semi-color-tertiary: 154, 163, 181; --semi-color-tertiary-hover: 180, 188, 204; --semi-color-tertiary-active: 200, 208, 224; /* —— 反白/纯白纯黑 —— */ --semi-color-white: 232, 236, 245; --semi-color-black: 7, 8, 13; /* —— 禁用 —— */ --semi-color-disabled-bg: 31, 35, 53; --semi-color-disabled-fill: 31, 35, 53; --semi-color-disabled-text: 94, 102, 117; --semi-color-disabled-border: 255, 255, 255; /* —— 阴影变量 —— */ --semi-shadow-elevated: 0 8px 28px rgba(0, 0, 0, 0.55); /* —— 字体变量 —— */ --semi-font-family-regular: var(--brand-font-sans); } /* ============================================================================ 2. 全局基底：避免任何白底残留 ============================================================================ */ html, body, #root, #app { background-color: var(--brand-bg) !important; color: var(--brand-text-0); font-family: var(--brand-font-sans) !important; } /* 克制的深空径向光晕 + 极淡网格，挂在 body（不影响布局） */ body { background-color: var(--brand-bg) !important; background-image: radial-gradient(1100px 720px at 78% -8%, rgba(77, 141, 255, 0.10), transparent 60%), radial-gradient(900px 600px at 8% 4%, rgba(255, 59, 82, 0.055), transparent 58%), linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) !important; background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px !important; background-attachment: fixed !important; } /* 布局容器透明，让 body 背景透出 */ .semi-layout, .semi-layout-content, .semi-layout-has-sider, .main-content, .tab-content { background-color: transparent !important; color: var(--brand-text-0); } /* 字体统一应用 */ body, .semi-typography, .semi-table, .semi-button, .semi-input, .semi-select, .semi-form, .semi-modal, .semi-card, .semi-nav { font-family: var(--brand-font-sans) !important; } /* 等宽：代码、token、数字密集处 */ code, pre, kbd, samp, .semi-typography-code, .semi-table-tbody .monospace, .semi-input-number .semi-input { font-family: var(--brand-font-mono) !important; } /* ============================================================================ 3. 顶部栏 / 侧边栏菜单（Nav） ============================================================================ */ .semi-navigation, .semi-navigation-vertical, .semi-navigation-horizontal { background-color: rgba(11, 13, 22, 0.72) !important; backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); border-color: var(--brand-border) !important; } .semi-navigation-horizontal { border-bottom: 1px solid var(--brand-hairline) !important; } .semi-navigation-vertical { border-right: 1px solid var(--brand-hairline) !important; } .semi-navigation-item { color: var(--brand-text-1) !important; border-radius: var(--brand-radius); } .semi-navigation-item:hover { background-color: rgba(255, 255, 255, 0.05) !important; color: var(--brand-text-0) !important; } .semi-navigation-item-selected, .semi-navigation-item-selected:hover { background-color: var(--brand-blue-soft) !important; color: var(--brand-blue-hover) !important; } .semi-navigation-item-selected .semi-navigation-item-icon, .semi-navigation-item-selected .semi-icon { color: var(--brand-blue-hover) !important; } /* 垂直菜单选中左侧蓝条 */ .semi-navigation-vertical .semi-navigation-item-selected::before { background-color: var(--brand-blue) !important; } .semi-navigation-header-logo, .semi-navigation-header-text { color: var(--brand-text-0) !important; } .semi-navigation-sub-title, .semi-navigation-group-title { color: var(--brand-text-2) !important; } /* ============================================================================ 4. 卡片 / 面板 —— 深色玻璃质感 ============================================================================ */ .semi-card, .semi-collapse, .semi-panel, .panel, .semi-descriptions { background-color: rgba(17, 19, 31, 0.66) !important; backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); border: 1px solid var(--brand-border) !important; border-radius: var(--brand-radius) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px rgba(0, 0, 0, 0.35) !important; color: var(--brand-text-0) !important; transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .semi-card:hover { transform: translateY(-2px); border-color: rgba(77, 141, 255, 0.35) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(77, 141, 255, 0.16) !important; } .semi-card-header, .semi-card-header-wrapper { border-bottom: 1px solid var(--brand-hairline) !important; } .semi-card-header-title, .semi-card-meta-title { color: var(--brand-text-0) !important; } .semi-card-body, .semi-card-meta-description { color: var(--brand-text-1) !important; } /* 模型广场 /pricing 价格卡片：蓝色点缀价格与标签 */ .semi-card .price, .semi-card .model-price, .semi-card-body .semi-typography-primary { color: var(--brand-blue-hover) !important; } /* ============================================================================ 5. 按钮 ============================================================================ */ /* 主按钮（实心蓝） */ .semi-button-primary, .semi-button.semi-button-primary { background-color: var(--brand-blue) !important; color: #06101f !important; border: none !important; border-radius: var(--brand-radius) !important; font-weight: 600; box-shadow: 0 4px 16px rgba(77, 141, 255, 0.30); } .semi-button-primary:hover { background-color: var(--brand-blue-hover) !important; box-shadow: 0 6px 22px rgba(77, 141, 255, 0.42); } .semi-button-primary:active { background-color: var(--brand-blue-active) !important; } /* 次级 / 文本 / 边框按钮 */ .semi-button-secondary, .semi-button-tertiary, .semi-button-borderless { color: var(--brand-text-0) !important; border-radius: var(--brand-radius) !important; } .semi-button-secondary { background-color: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--brand-border) !important; } .semi-button-secondary:hover, .semi-button-tertiary:hover, .semi-button-borderless:hover { background-color: rgba(255, 255, 255, 0.09) !important; color: var(--brand-text-0) !important; } /* 危险按钮 → 品牌红 */ .semi-button-danger { background-color: var(--brand-red) !important; color: #fff !important; border: none !important; } .semi-button-danger:hover { background-color: var(--brand-red-hover) !important; } /* ============================================================================ 6. 输入框 / 文本域 / 选择器 / 数字输入 ============================================================================ */ .semi-input-wrapper, .semi-textarea-wrapper, .semi-select, .semi-input-number, .semi-tree-select, .semi-cascader, .semi-datepicker-range-input, .semi-timepicker-input { background-color: rgba(255, 255, 255, 0.035) !important; border: 1px solid var(--brand-border) !important; border-radius: var(--brand-radius) !important; color: var(--brand-text-0) !important; } .semi-input-wrapper:hover, .semi-textarea-wrapper:hover, .semi-select:hover, .semi-input-number:hover { border-color: rgba(255, 255, 255, 0.18) !important; } .semi-input-wrapper-focus, .semi-textarea-wrapper-focus, .semi-select-focus, .semi-input-number-focus, .semi-input-wrapper:focus-within { border-color: var(--brand-blue) !important; box-shadow: 0 0 0 2px rgba(77, 141, 255, 0.22) !important; } .semi-input, .semi-textarea, .semi-select-selection, .semi-input-number-input { background-color: transparent !important; color: var(--brand-text-0) !important; } .semi-input::placeholder, .semi-textarea::placeholder { color: var(--brand-text-2) !important; } .semi-select-selection-placeholder { color: var(--brand-text-2) !important; } /* ============================================================================ 7. 下拉 / 弹层 / 气泡 / 提示 ============================================================================ */ .semi-dropdown, .semi-select-option-list, .semi-popover-content, .semi-popover-inner, .semi-cascader-option-list, .semi-tree-select-option-list, .semi-datepicker, .semi-timepicker-panel, .semi-autocomplete-option-list, .semi-dropdown-menu { background-color: rgba(23, 26, 41, 0.96) !important; backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); border: 1px solid var(--brand-border) !important; border-radius: var(--brand-radius) !important; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55) !important; color: var(--brand-text-0) !important; } .semi-select-option, .semi-dropdown-item, .semi-cascader-option, .semi-autocomplete-option { color: var(--brand-text-1) !important; } .semi-select-option:hover, .semi-dropdown-item:hover, .semi-cascader-option:hover, .semi-autocomplete-option:hover { background-color: rgba(255, 255, 255, 0.06) !important; color: var(--brand-text-0) !important; } .semi-select-option-selected, .semi-select-option-focused { background-color: var(--brand-blue-soft) !important; color: var(--brand-blue-hover) !important; } .semi-tooltip-wrapper, .semi-tooltip { background-color: rgba(31, 35, 53, 0.98) !important; color: var(--brand-text-0) !important; border: 1px solid var(--brand-border) !important; border-radius: 8px !important; } .semi-tooltip-arrow path { fill: rgba(31, 35, 53, 0.98) !important; } /* ============================================================================ 8. 表格 ============================================================================ */ .semi-table, .semi-table-wrapper { background-color: transparent !important; color: var(--brand-text-0) !important; } .semi-table-thead > .semi-table-row > .semi-table-row-head, .semi-table-thead .semi-table-row-head { background-color: rgba(255, 255, 255, 0.04) !important; color: var(--brand-text-1) !important; border-bottom: 1px solid var(--brand-border) !important; font-weight: 600; } .semi-table-tbody > .semi-table-row > .semi-table-row-cell { background-color: transparent !important; color: var(--brand-text-0) !important; border-bottom: 1px solid var(--brand-hairline) !important; } .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell, .semi-table-row-hover > .semi-table-row-cell { background-color: rgba(77, 141, 255, 0.07) !important; } .semi-table-tbody > .semi-table-row-selected > .semi-table-row-cell { background-color: var(--brand-blue-softer) !important; } .semi-table-row-expand, .semi-table-placeholder { background-color: transparent !important; color: var(--brand-text-1) !important; } /* 分页 */ .semi-page-item { background-color: rgba(255, 255, 255, 0.04) !important; color: var(--brand-text-1) !important; border: 1px solid var(--brand-border) !important; border-radius: 8px !important; } .semi-page-item:hover { color: var(--brand-text-0) !important; border-color: rgba(255, 255, 255, 0.2) !important; } .semi-page-item-active { background-color: var(--brand-blue-soft) !important; color: var(--brand-blue-hover) !important; border-color: var(--brand-blue) !important; } /* ============================================================================ 9. 标签 Tag / 徽标 Badge ============================================================================ */ .semi-tag { border-radius: 7px !important; border: 1px solid var(--brand-border) !important; font-family: var(--brand-font-sans) !important; } .semi-tag-default, .semi-tag-grey { background-color: rgba(255, 255, 255, 0.06) !important; color: var(--brand-text-1) !important; } .semi-tag-blue, .semi-tag-light-blue, .semi-tag-primary { background-color: var(--brand-blue-soft) !important; color: var(--brand-blue-hover) !important; border-color: rgba(77, 141, 255, 0.4) !important; } .semi-tag-red, .semi-tag-light-red { background-color: var(--brand-red-soft) !important; color: #ff7585 !important; border-color: rgba(255, 59, 82, 0.4) !important; } .semi-tag-green, .semi-tag-light-green { background-color: rgba(46, 204, 138, 0.15) !important; color: #4fe0a8 !important; border-color: rgba(46, 204, 138, 0.4) !important; } .semi-badge-count, .semi-badge-dot { box-shadow: 0 0 0 2px var(--brand-bg) !important; } /* ============================================================================ 10. Modal / Drawer / 弹窗 ============================================================================ */ .semi-modal-content, .semi-sidesheet-inner, .semi-drawer-content { background-color: rgba(17, 19, 31, 0.96) !important; backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%); border: 1px solid var(--brand-border) !important; border-radius: 14px !important; color: var(--brand-text-0) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important; } .semi-modal-header, .semi-sidesheet-header { border-bottom: 1px solid var(--brand-hairline) !important; background-color: transparent !important; } .semi-modal-title, .semi-sidesheet-title { color: var(--brand-text-0) !important; } .semi-modal-footer { border-top: 1px solid var(--brand-hairline) !important; } .semi-modal-mask, .semi-sidesheet-mask { background-color: rgba(3, 4, 8, 0.66) !important; backdrop-filter: blur(2px); } /* ============================================================================ 11. 文字排印 / 链接 / 标题 ============================================================================ */ .semi-typography, .semi-typography-paragraph { color: var(--brand-text-0) !important; } .semi-typography h1, .semi-typography h2, .semi-typography h3, .semi-typography-title, h1, h2, h3, h4, h5 { color: var(--brand-text-0) !important; font-family: var(--brand-font-sans) !important; letter-spacing: -0.01em; } .semi-typography-secondary, .semi-typography-tertiary { color: var(--brand-text-1) !important; } a, .semi-typography-link { color: var(--brand-blue-hover) !important; } a:hover, .semi-typography-link:hover { color: #8cb4ff !important; } /* ============================================================================ 12. 表单 / 开关 / 复选 / 单选 / 滑块 / Tabs / 进度 ============================================================================ */ .semi-form-field-label, .semi-form-field-label-text { color: var(--brand-text-1) !important; } .semi-checkbox-inner-display, .semi-radio-inner-display { background-color: rgba(255, 255, 255, 0.04) !important; border-color: var(--brand-border) !important; } .semi-checkbox-checked .semi-checkbox-inner-display, .semi-radio-checked .semi-radio-inner-display { background-color: var(--brand-blue) !important; border-color: var(--brand-blue) !important; } .semi-switch-checked { background-color: var(--brand-blue) !important; } .semi-switch { background-color: rgba(255, 255, 255, 0.14) !important; } .semi-slider-track { background-color: var(--brand-blue) !important; } .semi-slider-rail { background-color: rgba(255, 255, 255, 0.12) !important; } /* Tabs */ .semi-tabs-bar { border-bottom: 1px solid var(--brand-hairline) !important; } .semi-tabs-tab { color: var(--brand-text-1) !important; } .semi-tabs-tab-active, .semi-tabs-tab:hover { color: var(--brand-text-0) !important; } .semi-tabs-tab-active { color: var(--brand-blue-hover) !important; } .semi-tabs-bar-line .semi-tabs-tab-active::after, .semi-tabs-ink-bar { background-color: var(--brand-blue) !important; } /* 进度条 */ .semi-progress-track { background-color: rgba(255, 255, 255, 0.1) !important; } .semi-progress-track-inner { background-color: var(--brand-blue) !important; } /* 分隔线 */ .semi-divider { background-color: var(--brand-hairline) !important; border-color: var(--brand-hairline) !important; } /* ============================================================================ 13. 滚动条（深色细滑） ============================================================================ */ * { scrollbar-color: rgba(255, 255, 255, 0.18) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.16); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(77, 141, 255, 0.5); background-clip: content-box; } /* ============================================================================ 14. 登录页 / 空状态 / Spin 等零散表面兜底 ============================================================================ */ .semi-empty-description, .semi-spin-tip { color: var(--brand-text-1) !important; } .semi-spin-dot { color: var(--brand-blue) !important; } .login-container, .register-container, .auth-card, .semi-card.login { background-color: rgba(17, 19, 31, 0.7) !important; border: 1px solid var(--brand-border) !important; backdrop-filter: blur(14px); } /* 选区高亮 */ ::selection { background-color: rgba(77, 141, 255, 0.35); color: #fff; } /* ============================================================================ 15. 白标清理：隐藏面板软件署名 + 去掉冲突的黄色装饰圆 ============================================================================ */ /* 页脚「设计与开发由 New API」(含指向 new-api 仓库的链接) */ footer div.text-sm { display: none !important; } /* 页脚黄色装饰圆，与深空风冲突 */ [class*="FFD166"] { display: none !important; }