/* ========================================================================== * NewAPI (api.choogo.mobi 根站) UI 自定义样式 * -------------------------------------------------------------------------- * - 完全不修改 NewAPI 容器内的代码，仅在 Nginx 返回 HTML 时追加注入 * - 想调整什么就写在这个文件里，改完同步到服务器 → reload nginx 即生效 * - 本文件只影响 NewAPI 根站（/ 路由），不影响 /sub2api/* 的 Sub2API UI * ========================================================================== */ /* -------------------------------------------------------------------------- * * 主题色：深蓝色（基于 Semi Design token 覆盖，同时兼容亮色/暗色主题） * 调色板（由浅到深）： * 主色 L1 (最浅) #DBEAFE → 大背景、轻底色 / light-default * 主色 L2 #BFDBFE → light-hover * 主色 L3 #93C5FD → light-active * 主色 L4 #3B82F6 → primary-hover * 主色 L5 #2563EB → primary（默认主色） * 主色 L6 #1D4ED8 → primary-active * 主色 L7 (最深) #1E3A8A → 深蓝强调 / 文字主色（必要时） * -------------------------------------------------------------------------- */ :root, html, body, [data-semi-theme="light"], [data-semi-theme="dark"], .semi-always-light, .semi-always-dark { /* primary 主系列 */ --semi-color-primary: #2563EB !important; --semi-color-primary-hover: #3B82F6 !important; --semi-color-primary-active: #1D4ED8 !important; --semi-color-primary-disabled: #93C5FD !important; /* primary 浅系列（用于 ghost / tertiary / 浅色按钮） */ --semi-color-primary-light-default: #DBEAFE !important; --semi-color-primary-light-hover: #BFDBFE !important; --semi-color-primary-light-active: #93C5FD !important; /* info（很多地方 info 和 primary 同色，保持一致） */ --semi-color-info: #2563EB !important; --semi-color-info-hover: #3B82F6 !important; --semi-color-info-active: #1D4ED8 !important; --semi-color-info-disabled: #93C5FD !important; --semi-color-info-light-default: #DBEAFE !important; --semi-color-info-light-hover: #BFDBFE !important; --semi-color-info-light-active: #93C5FD !important; /* link / focus 保持蓝色系 */ --semi-color-link: #2563EB !important; --semi-color-link-hover: #3B82F6 !important; --semi-color-link-active: #1D4ED8 !important; --semi-color-link-visited: #1E3A8A !important; --semi-color-focus-border: #2563EB !important; /* 强调色：选中高亮背景、tag 默认色 */ --semi-color-highlight: #BFDBFE !important; --semi-color-highlight-bg: #DBEAFE !important; /* 把旧 blue 色阶整体切到深蓝（某些组件读这些变量） */ --semi-blue-0: #EFF6FF !important; --semi-blue-1: #DBEAFE !important; --semi-blue-2: #BFDBFE !important; --semi-blue-3: #93C5FD !important; --semi-blue-4: #60A5FA !important; --semi-blue-5: #3B82F6 !important; --semi-blue-6: #2563EB !important; --semi-blue-7: #1D4ED8 !important; --semi-blue-8: #1E40AF !important; --semi-blue-9: #1E3A8A !important; /* indigo 色阶也覆盖成更深的蓝（避免某些元素跳到紫色调） */ --semi-indigo-0: #EEF2FF !important; --semi-indigo-1: #E0E7FF !important; --semi-indigo-2: #C7D2FE !important; --semi-indigo-3: #A5B4FC !important; --semi-indigo-4: #818CF8 !important; --semi-indigo-5: #6366F1 !important; --semi-indigo-6: #4F46E5 !important; --semi-indigo-7: #4338CA !important; --semi-indigo-8: #3730A3 !important; --semi-indigo-9: #312E81 !important; /* toast / notify（info 主色走深蓝） */ --toastify-color-info: #2563EB !important; --toastify-icon-color-info: #2563EB !important; --toastify-color-progress-info: #2563EB !important; /* NewAPI 自己在 index 里写的 --pb 自定义色变量（登录页背景/横幅）兜底 */ --pb1: #1E3A8A; --pb2: #1D4ED8; --pb3: #2563EB; --pb4: #3B82F6; } /* -------------------------------------------------------------------------- * * 通用组件补充：按钮、Tab、进度条、开关、徽章等，防止部分组件不走 semi token * -------------------------------------------------------------------------- */ /* 主按钮主色兜底（inline style 或者其他组件库写死的情况） */ button[style*="background"][style*="primary"], button[style*="background-color"] { /* 只对明显的旧主色做兜底，不影响已走 token 的情况 */ } /* 侧边栏高亮 + 菜单激活态：兜底成深蓝（旧 new-api 版本可能写死背景色） */ .semi-navigation-item-selected, .semi-navigation-item-active { color: #2563EB !important; } .semi-navigation-item-selected > .semi-navigation-item-content, .semi-navigation-item-active > .semi-navigation-item-content { background: #DBEAFE !important; border-left-color: #2563EB !important; } /* Tab / NavTab 激活下划线颜色兜底 */ .semi-tabs-bar-line, .semi-tabs-tab-active > .semi-tabs-tab-inner, .semi-navTab-item-active { border-color: #2563EB !important; color: #2563EB !important; } /* 进度条 / 开关 / 徽章 主色兜底 */ .semi-progress-inner, .semi-switch-checked, .semi-tag-primary { background: #2563EB !important; border-color: #2563EB !important; } /* --- Tailwind 类覆盖：把绿/蓝主色类统一替换成深蓝 --- */ html body [class~="bg-green-500"] { background-color: #2563EB !important; } html body [class~="bg-green-600"] { background-color: #1D4ED8 !important; } html body [class~="hover\:bg-green-600"]:hover { background-color: #1D4ED8 !important; } html body [class~="bg-blue-500"] { background-color: #2563EB !important; } html body [class~="bg-blue-600"] { background-color: #1D4ED8 !important; } html body [class~="hover\:bg-blue-600"]:hover { background-color: #1D4ED8 !important; } html body [class~="text-green-400"], html body [class~="text-green-500"], html body [class~="text-green-600"] { color: #2563EB !important; } html body [class~="text-blue-400"], html body [class~="text-blue-500"], html body [class~="text-blue-600"] { color: #2563EB !important; } html body [class~="hover\:text-blue-500"]:hover, html body [class~="hover\:text-blue-600"]:hover, html body [class~="hover\:text-green-500"]:hover, html body [class~="hover\:text-green-600"]:hover { color: #1D4ED8 !important; } html body [class~="bg-blue-50"], html body [class~="bg-blue-100"], html body [class~="bg-green-50"], html body [class~="bg-green-100"] { background-color: #DBEAFE !important; } html body [class~="hover\:bg-blue-50"]:hover, html body [class~="hover\:bg-blue-100"]:hover, html body [class~="hover\:bg-green-50"]:hover, html body [class~="hover\:bg-green-100"]:hover { background-color: #BFDBFE !important; } html body [class~="border-green-400"], html body [class~="border-green-500"], html body [class~="border-blue-400"], html body [class~="border-blue-500"] { border-color: #2563EB !important; } html body [class~="focus\:ring-blue-500"]:focus, html body [class~="focus\:ring-green-500"]:focus, html body [class~="ring-blue-500"], html body [class~="ring-green-500"] { --tw-ring-color: #2563EB !important; box-shadow: 0 0 0 3px rgba(37,99,235,.3) !important; } /* 首页卡片左侧的语义色圆形按钮 bg-green-500 / bg-blue-500 → 深蓝 */ html body button.semi-button-light[class~="\!rounded-full"][class~="bg-green-500"], html body button.semi-button-light[class~="\!rounded-full"][class~="bg-blue-500"] { background-color: #2563EB !important; } html body button.semi-button-light[class~="\!rounded-full"][class~="hover\:bg-green-600"]:hover, html body button.semi-button-light[class~="\!rounded-full"][class~="hover\:bg-blue-600"]:hover { background-color: #1D4ED8 !important; } /* SVG 内嵌 fill / stroke 绿 → 深蓝；红/黄保留 */ html body svg path[fill="#22c55e"], html body svg path[fill="#16a34a"], html body svg path[fill="#10b981"], html body svg circle[fill="#22c55e"],html body svg circle[fill="#16a34a"],html body svg circle[fill="#10b981"], html body svg rect[fill="#22c55e"], html body svg rect[fill="#16a34a"], html body svg rect[fill="#10b981"] { fill: #2563EB !important; } html body svg path[stroke="#22c55e"], html body svg path[stroke="#16a34a"], html body svg path[stroke="#10b981"], html body svg circle[stroke="#22c55e"],html body svg circle[stroke="#16a34a"],html body svg circle[stroke="#10b981"] { stroke: #2563EB !important; } /* 顶部导航自定义项 hover 主色 */ html body [class~="hover\:text-semi-color-primary"]:hover { color: #2563EB !important; } /* 滚动条拇指（hover 时变深一点） */ ::-webkit-scrollbar-thumb { background: #93C5FD !important; } ::-webkit-scrollbar-thumb:hover { background: #2563EB !important; } /* 聚焦态统一蓝色环，保证 a11y 也和主色一致 */ *:focus-visible { outline-color: #2563EB !important; border-color: #2563EB !important; } /* -------------------------------------------------------------------------- * * 登录 / 注册 / 找回密码 / setup 页背景：深蓝渐变 + 柔光光斑 * - 通过 JS 给 打标，所以只影响这些路由 * - 控制台/首页（没打标）不会被波及 * - 设计思路：保持深蓝主色，四角柔光，用 pseudo 元素做漂移光斑 * -------------------------------------------------------------------------- */ body.page-auth-bg, body.page-auth-bg > #root, body.page-auth-bg > #root > section.app-layout, body.page-auth-bg > #root > section.app-layout > .semi-layout-content, body.page-auth-bg > #root > section.app-layout > .semi-layout-content > .semi-layout-content-inner { background: transparent !important; } /* 把渐变层铺在两处： * 1) html 根（保证浏览器画 viewport 时能看见渐变，避免 body 不占满整屏的问题） * 2) 登录外层 wrapper（.relative.overflow-hidden.bg-gray-100.flex.items-center.justify-center） * 这样不管页面是 body 高度 > viewport，还是 wrapper 内部有滚动，渐变都铺满。 */ html:has(body.page-auth-bg), html body.page-auth-bg, html body.page-auth-bg #root > section.app-layout > section.semi-layout > main.semi-layout-content > div.relative.overflow-hidden.bg-gray-100, html body.page-auth-bg #root > section.app-layout > section.semi-layout section.semi-layout > main.semi-layout-content > div.relative.overflow-hidden.bg-gray-100, html body.page-auth-bg main.semi-layout-content > div.relative.overflow-hidden.flex.items-center.justify-center { background-color: #0B1F4C; /* 基础线性渐变：由 #0B1F4C (近乎蓝黑) 斜铺到 #13326B / #1D4ED8 / #2563EB，与主色衔接 */ background-image: linear-gradient(135deg, #0B1F4C 0%, #13326B 32%, #1D4ED8 64%, #2563EB 100%), radial-gradient(1200px 800px at 12% 8%, rgba(96,165,250,.35), transparent 60%), radial-gradient(1000px 700px at 92% 14%, rgba(29,78,216,.38), transparent 55%), radial-gradient(900px 800px at 50% 110%, rgba(37,99,235,.45), transparent 55%), radial-gradient(700px 600px at 100% 100%, rgba(30,64,175,.5), transparent 60%); background-blend-mode: normal, screen, screen, screen, multiply; background-attachment: fixed, fixed, fixed, fixed, fixed; background-repeat: no-repeat; background-size: cover; } /* 两团缓慢漂移的"高光球"，增加层次感，不会像粒子那样噪 */ html body.page-auth-bg::before, html body.page-auth-bg::after { content: ""; position: fixed; z-index: 0; pointer-events: none; border-radius: 9999px; filter: blur(60px); opacity: .55; will-change: transform; } html body.page-auth-bg::before { width: 520px; height: 520px; left: -140px; top: -120px; background: radial-gradient(circle at 30% 30%, #60A5FA 0%, rgba(59,130,246,.6) 35%, transparent 70%); animation: gccAuthOrbA 22s ease-in-out infinite alternate; } html body.page-auth-bg::after { width: 620px; height: 620px; right: -160px; bottom: -180px; background: radial-gradient(circle at 70% 70%, #1E40AF 0%, rgba(29,78,216,.7) 40%, transparent 72%); animation: gccAuthOrbB 28s ease-in-out infinite alternate; } @keyframes gccAuthOrbA { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(40px,30px,0) scale(1.06); } 100% { transform: translate3d(20px,60px,0) scale(.98); } } @keyframes gccAuthOrbB { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-50px,-40px,0) scale(1.08); } 100% { transform: translate3d(-30px,20px,0) scale(.97); } } /* 让 #root 的所有 direct children 层级在渐变之上 */ html body.page-auth-bg > #root, html body.page-auth-bg > #root > * { position: relative; z-index: 1; } /* 顶部登录页卡片外层容器：所有涉及到背景色的父容器都强制透明， 否则 semi-layout 默认的 bg-gray-50 / --semi-color-bg-1 会盖住我们的渐变 */ html body.page-auth-bg section.fluent-new-api-container, html body.page-auth-bg .app-layout > section.semi-layout > section.semi-layout, html body.page-auth-bg .app-layout > section.semi-layout > main.semi-layout-content, html body.page-auth-bg .app-layout > main, html body.page-auth-bg .app-layout > .semi-layout-content, html body.page-auth-bg .app-layout > .semi-layout-content > .semi-layout-content-inner, html body.page-auth-bg #root > div[class*="min-h-screen"], html body.page-auth-bg #root > section.app-layout > main, html body.page-auth-bg #root > section.app-layout > .semi-layout-content, html body.page-auth-bg main.semi-layout-content, html body.page-auth-bg footer.semi-layout-footer, html body.page-auth-bg .semi-layout-footer { background: transparent !important; background-color: transparent !important; } /* 固定在顶部的 header：登录/注册页不要延续首页那种白色顶栏， 改成半透明白玻璃叠在深蓝渐变上，视觉一体 */ html body.page-auth-bg header.semi-layout-header > header[class*="bg-white"], html body.page-auth-bg .semi-layout-header header[class*="bg-white/75"] { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18)) !important; -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); border-bottom: 1px solid rgba(255,255,255,.28); } /* Footer 在登录页底部：同样透明，白字更突出 */ html body.page-auth-bg footer.semi-layout-footer, html body.page-auth-bg .semi-layout-footer, html body.page-auth-bg footer[class*="relative h-auto py-16"] { background: transparent !important; } html body.page-auth-bg footer.semi-layout-footer .semi-typography, html body.page-auth-bg footer.semi-layout-footer span[class*="text-semi-color-text-1"], html body.page-auth-bg .semi-layout-footer span[class*="text-semi-color-text-1"] { color: #E2E8F0 !important; } html body.page-auth-bg footer.semi-layout-footer a[class*="text-semi-color-text-1"], html body.page-auth-bg .semi-layout-footer a[class*="text-semi-color-text-1"] { color: #BFDBFE !important; } /* Auth 卡片外层（flex min-h-screen 的那个容器，通常透明）： 加上 0.06 的 noise/杂色（纯 CSS）让渐变更"高级"一点 */ html body.page-auth-bg #root { isolation: isolate; } /* 真正包裹登录卡片的 max-w-md / max-w-lg 外层： 给卡片加上白底玻璃（半透明 + 细白描边 + 柔和阴影），保证可对比度 */ html body.page-auth-bg :is(div[class*="w-full max-w-md"], div[class*="w-full max-w-lg"]) { /* 外层的小容器我们不动它，下面直接命中 Semi Card */ } html body.page-auth-bg .semi-card { background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86)) !important; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255,255,255,.7) !important; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 30px -8px rgba(11,31,76,.45), 0 30px 60px -20px rgba(11,31,76,.45) !important; } /* 暗色主题下的 Auth 卡片：同样玻璃化，但用深半透明底 */ html[data-semi-theme="dark"] body.page-auth-bg .semi-card, html body.page-auth-bg.dark-mode .semi-card, [data-semi-theme="dark"].page-auth-bg .semi-card { background: linear-gradient(180deg, rgba(17,24,39,.78), rgba(17,24,39,.62)) !important; border: 1px solid rgba(96,165,250,.22) !important; } /* 卡片顶部的 Logo + 品牌标题一行（让它也和深蓝呼应，品牌字颜色直接走 primary 深蓝） */ html body.page-auth-bg div.flex.items-center.justify-center.mb-6.gap-2 h3.semi-typography-heading, html body.page-auth-bg div[class*="mb-6"] h3.semi-typography { color: #1E3A8A !important; } html body.page-auth-bg div.flex.items-center.justify-center.mb-6.gap-2 img[alt="Logo"] { box-shadow: 0 6px 20px -6px rgba(11,31,76,.5); } /* 登录页的"主按钮"原先写的是 bg-black → 为整体统一改成深蓝主色 */ html body.page-auth-bg button.semi-button-primary[class*="bg-black"], html body.page-auth-bg button.semi-button[class*="bg-black"][class*="rounded-full"] { background-color: #2563EB !important; } html body.page-auth-bg button.semi-button-primary[class*="bg-black"]:hover, html body.page-auth-bg button.semi-button[class*="bg-black"][class*="rounded-full"]:hover { background-color: #1D4ED8 !important; } /* 第三方按钮（white outline）在渐变背景上更突出：加一点白玻璃阴影 */ html body.page-auth-bg button.semi-button[class*="border border-gray-200"][class*="rounded-full"] { background: rgba(255,255,255,.85) !important; backdrop-filter: blur(8px); } /* 登录页文字在深蓝渐变上，防止个别次级文字在玻璃下看不清 */ html body.page-auth-bg .semi-typography.text-gray-800, html body.page-auth-bg .semi-typography[class*="text-gray-800"] { color: #0F172A !important; /* slate-900，对比更强 */ } /* 如果是 setup 页面（首次初始化，页面结构是 max-w-4xl 大卡片）同样上玻璃 */ html body.page-auth-bg #root > div[class*="min-h-screen"] > div[class*="max-w-4xl"] > .semi-card { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)) !important; } /* -------------------------------------------------------------------------- * * （占位示例，按需再改） * 想隐藏首页某块 → 用 DevTools 复制选择器，写 display:none !important * -------------------------------------------------------------------------- */