/* ============================================================ 推理时代 · 全站样式（原生 CSS，零外部引用，只用系统字体） ------------------------------------------------------------ 设计基调：亮色为默认，暗色可切换。面一律走中性，不带色相；颜色由三支强调色出——亮绿（lime）是品牌与主操作，电光蓝（blue）是数据与信息，荧光粉（pink）是强调与点缀。上一版的面是橄榄绿/米黄那一支，整片铺开就是一层「土黄」的膜，再亮的绿压在上面也发闷；换成中性之后，颜色才出得来。守则：一、颜色只有一个来源——下面的令牌表。模板里不写死色值，要新颜色就先在令牌表里加一条。二、卡片只有描边，不飘阴影。阴影只留给真正浮起来的层（弹窗、抽屉、提示、场景窗口）。三、数字一律 tabular-nums，成列的数字上下对得齐。四、圆角三级：控件 8 / 卡片 10 / 浮层 14，不同层级不共用。五、动效克制。全站只有几处：入口遮罩、首屏轨道图、首页鹈鹕场景、卡片图标描边、页脚信号线。其余一律不做动画。主题切换：，**默认亮色**。没跑 JS 时属性不存在，也就是亮色——不会出现「暗一下再翻白」。 ============================================================ */ :root { color-scheme: light; /* ---- 面 ---- 底是中性冷白灰，卡片比页面亮一档（白卡浮在灰底上），线是冷灰。原来那套是「暖纸底 + 米色卡」，一整屏的米黄就是用户说的「屎黄色」，绿色压在上面也显脏。换成中性之后，同一支绿终于是绿的。 */ --bg: #f4f5f7; /* 页面底 */ --bg-glass: rgba(244, 245, 247, .86);/* 顶栏毛玻璃 */ --surface: #ffffff; /* 卡片 / 侧栏 */ --surface-2: #eceef1; /* 卡片的第二层（hover、内嵌块） */ --surface-glass: rgba(255, 255, 255, .78);/* 玻璃拟态面：抽屉、浮层、悬浮控件 */ --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .8); /* 玻璃上沿那道高光 */ --mask: rgba(12, 15, 20, .38); /* 弹窗 / 抽屉背后的蒙版 */ /* ---- 字 ---- 中性灰，不做暖调。中性底 + 中性字，三支强调色才是画面里有颜色的东西。 */ --ink: #14171b; --muted: #5b626a; --muted-2: #838a92; /* ---- 线 ---- */ --line: #dde1e6; --line-soft: rgba(221, 225, 230, .7); /* ---- 强调 ---- 三支色，语义定死：亮绿 = 品牌与主操作，电光蓝 = 数据与信息，荧光粉 = 强调与点缀。模板里只准用令牌名，不准写死色值。亮绿的色相定在 82（青柠），**不是** 70。70 是黄绿，饱和一收、亮度一降，在白底上就是橄榄黄、芥末黄——用户说「亮色下这绿更屎黄」就是它自己发出来的。抬到 82 还是黄绿家族，但在白底上读出来是绿的；两个主题共用同一个色相，切主题时品牌色不变调，只是提亮一档。 --on-lime / --on-blue / --on-red / --on-pink 是压在实心色块上的前景色。前三个两个主题同值，所以只写在这里一份；--on-pink 因为两支粉的明暗正好相反（亮色偏深、暗色偏浅），所以在暗色主题里要覆盖一次。亮绿和电光蓝都**不够深**（配白字对比度掉到 3 左右），所以它们只做底、不做字；要绿色文字用 --lime-ink，要蓝色文字用 --blue-ink。 */ --lime: #78ab21; --lime-ink: #507411; /* 亮绿当文字用时的可读版本 */ --lime-hover: #6a961c; /* hover 往里收一档，而不是更亮 */ --lime-soft: rgba(120, 171, 33, .16); --on-lime: #12140c; --blue: #2f5fd8; /* 数据与信息：折线、环形、排行条、alert.blue */ --blue-ink: #1d4ecf; /* 蓝色当文字用 */ --blue-soft: rgba(47, 95, 216, .12); --on-blue: #fff; --pink: #c0407a; /* 强调与点缀：序号、::selection、focus 描边 */ --pink-soft: rgba(192, 64, 122, .12); --on-pink: #fff; /* ---- 状态 ---- 成功用薄荷绿而不是亮绿：亮绿是品牌色，状态再占一支绿，页面上「绿」就有两种意思，谁也说不清哪个是重点。 */ --ok: #1f8a5a; --ok-soft: rgba(31, 138, 90, .12); --red: #c0392b; --red-hover: #a52f24; --red-soft: rgba(192, 57, 43, .12); --on-red: #fff; --amber: #8a6100; --amber-soft: rgba(138, 97, 0, .13); /* ---- 终端面：代码块、密钥、请求示例 ---- 两个主题都是深底：代码块本来就该是深色的一小块，白底上反而看不清。 */ --term: #14171b; --term-2: #1e2227; --term-line: rgba(255, 255, 255, .1); --term-fg: #e6e9ec; --term-dim: #949ba3; /* ---- 阴影 ---- 亮底上的阴影要很轻：重一档，白卡就被压成灰饼了。暗色主题那套重得多，在下面的 [data-theme="dark"] 里覆盖。 */ --shadow: 0 1px 2px rgba(15, 20, 30, .06); --shadow-pop: 0 16px 40px rgba(15, 20, 30, .16), 0 2px 8px rgba(15, 20, 30, .08); --shadow-glass: 0 10px 28px rgba(15, 20, 30, .12), 0 2px 6px rgba(15, 20, 30, .06); /* ---- 尺寸 ---- */ --pad: clamp(20px, 4.4vw, 96px); --header-h: 72px; --radius-sm: 8px; /* 控件 */ --radius: 10px; /* 卡片 */ --radius-lg: 14px; /* 浮层、场景窗口 */ --sidebar: 236px; /* ---- 动效 ---- */ --ease: cubic-bezier(.65, 0, .35, 1); /* ---- 字体：只用系统字体，不引任何外部字体文件 ---- */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } /* 暗色主题：只换颜色和阴影，结构一动不动。面是中性灰黑 + 中性白字，不带暖调——暖黑是上一轮被否掉的那套。亮绿在暗底上要提亮才够看，色相仍是 82，跟亮色主题同一个调，所以切主题时品牌色只是明暗变了，不是换了支颜色。 */ [data-theme="dark"] { color-scheme: dark; --bg: #0f1114; --bg-glass: rgba(15, 17, 20, .84); --surface: #171a1e; --surface-2: #1f2328; --surface-glass: rgba(23, 26, 30, .74); --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .07); --mask: rgba(4, 5, 7, .66); --ink: #e9ecef; --muted: #a4abb3; --muted-2: #7d848c; --line: #2b3037; --line-soft: rgba(43, 48, 55, .6); --lime: #9fd345; --lime-ink: #a5d94e; --lime-hover: #8fbf3a; --lime-soft: rgba(159, 211, 69, .13); --blue: #3f6fe4; --blue-ink: #86a8ff; --blue-soft: rgba(63, 111, 228, .2); --pink: #d9538c; --pink-soft: rgba(217, 83, 140, .16); --on-pink: #12140c; --ok: #55d69a; --ok-soft: rgba(85, 214, 154, .14); --red: #ef5f5f; --red-hover: #d94c4c; --red-soft: rgba(239, 95, 95, .15); --amber: #eab54a; --amber-soft: rgba(234, 181, 74, .15); --term: #0b0d0f; --term-2: #15181c; --term-line: rgba(159, 211, 69, .12); --term-fg: #e6e9ec; --term-dim: #868d95; /* 暗底上阴影要沉得住，不然浮层跟背景糊在一起分不出层次 */ --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-pop: 0 20px 48px rgba(0, 0, 0, .5), 0 3px 10px rgba(0, 0, 0, .3); --shadow-glass: 0 12px 32px rgba(0, 0, 0, .34), 0 2px 6px rgba(0, 0, 0, .2); } /* ---- 向后兼容的别名 ---- 模板里已经内联了一批变量名（--line / --line-2 / --blue / --blue-light / --green / --red / --amber / --radius-sm）。为了不改四十多个模板，这里把它们全部映射到新令牌上——换色只改上面的令牌表就行。注意：阴影令牌不在这里，它们跟着主题走，在上下两个主题块里各一份。玻璃拟态是「面本身半透明 + 背后模糊 + 上沿一道高光」，阴影比普通卡片轻，玻璃靠「透」立起来，不靠「沉」下去。 */ :root { --white: var(--surface); --ink-2: var(--ink); --ink-3: var(--muted); --ink-4: var(--muted-2); --line-2: var(--line-soft); --blue-dark: var(--blue); --blue-light: var(--blue-soft); --green: var(--ok); --green-bg: var(--ok-soft); --red-bg: var(--red-soft); --amber-bg: var(--amber-soft); } /* ---- 三色轮转 ---- 三支强调色在页面上一处一处地轮着用，靠这三个类挂上去。不用 :nth-child 是因为要用色元素的所在层级各不相同（区块头、卡片图标、数字块都不是同一种父元素下的兄弟），数不出一个统一的序号；直接写在元素上最稳。每个类只出三个变量： --acc 这支色的「墨」—— 当文字色、当描边色都安全（见上面的对比度约定） --acc-soft 它的淡底，用来铺大片 --acc-fill 它的实心，用来做色块（配 --acc-on 画画在上面的东西） --acc-on 压在实心色块上的前景色模板里不写死色值，只写 acc-1 / acc-2 / acc-3。 */ .acc-1 { --acc: var(--lime-ink); --acc-soft: var(--lime-soft); --acc-fill: var(--lime); --acc-on: var(--on-lime); } .acc-2 { --acc: var(--blue-ink); --acc-soft: var(--blue-soft); --acc-fill: var(--blue); --acc-on: var(--on-blue); } .acc-3 { --acc: var(--pink); --acc-soft: var(--pink-soft); --acc-fill: var(--pink); --acc-on: var(--on-pink); } /* 有几组元素的序号在页面树里是整齐的（卡片网格、三步、跑马灯、数字条），这些地方直接按位置轮转，模板一行都不用改。轮转周期取 3，跟三支色对上；数字条是 4 格，所以第 4 格回到第 1 支色。数字条限定在 .pub-body 里：控制台和后台首页也用同一套 .tiles，那两处是运营数字，颜色一多反而看不清重点，保持中性。 */ .card-grid > .gcard:nth-child(3n+1), .steps > .step:nth-child(3n+1), .marquee-track > span:nth-child(3n+1), .pub-body .tiles > .tile:nth-child(4n+1) { --acc: var(--lime-ink); --acc-soft: var(--lime-soft); --acc-fill: var(--lime); --acc-on: var(--on-lime); } .card-grid > .gcard:nth-child(3n+2), .steps > .step:nth-child(3n+2), .marquee-track > span:nth-child(3n+2), .pub-body .tiles > .tile:nth-child(4n+2) { --acc: var(--blue-ink); --acc-soft: var(--blue-soft); --acc-fill: var(--blue); --acc-on: var(--on-blue); } .card-grid > .gcard:nth-child(3n+3), .steps > .step:nth-child(3n+3), .marquee-track > span:nth-child(3n+3), .pub-body .tiles > .tile:nth-child(4n+3) { --acc: var(--pink); --acc-soft: var(--pink-soft); --acc-fill: var(--pink); --acc-on: var(--on-pink); } .pub-body .tiles > .tile:nth-child(4n+4) { --acc: var(--lime-ink); --acc-soft: var(--lime-soft); --acc-fill: var(--lime); --acc-on: var(--on-lime); } /* ============================================================ 基础 ============================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 18px); } body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background .3s ease, color .3s ease; } a { color: var(--lime-ink); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 4px; } /* 整张卡片本身是的时候（热门模型），hover 不能让卡片里每一行字都划上下划线 */ a.mcard:hover, a.card-link:hover, a.card-link:hover * { text-decoration: none; } h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.3; text-wrap: balance; } h1 { letter-spacing: -.03em; } code, pre, .mono { font-family: var(--mono); } .ico { display: inline-block; vertical-align: -0.18em; flex: none; } [hidden] { display: none !important; } /* 选中色用荧光粉：亮绿已经被按钮和进度占满了，选中再占一支，页面上「绿」就有两种意思。粉在这两个主题里都能当文字色，配前景色都过 AA。 */ ::selection { background: var(--pink); color: var(--on-pink); } /* 键盘焦点：全站统一，鼠标点击不出圈。用实心的粉描边而不是淡色块——淡色块在浅底上几乎看不见，键盘用户其实找不到焦点在哪。2px 是「看得见」和「不吵」之间的那一档。 */ :focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 3px; } /* 刷新按钮：转的是图标，不是整颗按钮（文字跟着转会很怪） */ .spin { pointer-events: none; } .spin .ico { animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---- 页面级装饰（前台公开页） ---- */ /* 背景网格：中间亮、四周化开，给「接口/拓扑」一点暗示，不抢内容 */ .page-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 18%, transparent 76%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 18%, transparent 76%); } /* 阅读进度：只在公开页有意义（首页长，滚起来有个参照） */ .page-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; } /* ---- 入口遮罩 ---- 默认是不可见的：只有 JS 把 html[data-boot="pending"] 挂上去才显示。这样即使脚本没跑（或报错），用户看到的也是正常页面，不会被一块遮罩挡死。 */ #entry-cover { position: fixed; inset: 0; z-index: 300; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s ease; } html[data-boot="pending"] #entry-cover { opacity: 1; visibility: visible; } .entry-svg { width: 88px; height: 88px; } .entry-ring { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-linecap: round; transform-origin: 50px 50px; } .entry-ring.outer { stroke: var(--lime); stroke-dasharray: 46 166; animation: spin 1.1s linear infinite; } .entry-ring.inner { stroke: var(--lime); stroke-dasharray: 14 72; animation: spin .75s linear infinite reverse; } .entry-core { fill: var(--lime); transform-origin: 50px 50px; animation: entryPulse 1s ease-in-out infinite; } @keyframes entryPulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } } .entry-label { font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted-2); } /* ---- 首屏轨道图（首页 Hero 背景 / 认证页左侧）---- */ .orbit { pointer-events: none; } .orbit .ring { fill: none; stroke: var(--line); stroke-width: 1; transform-box: fill-box; transform-origin: center; } .orbit .ring:nth-child(1) { stroke-dasharray: 4 8; animation: spin 24s linear infinite; } .orbit .ring:nth-child(2) { stroke-dasharray: 2 10; animation: spin 40s linear infinite reverse; } .orbit .ring:nth-child(3) { stroke-dasharray: 1 14; animation: spin 64s linear infinite; } /* 从核心发出去的这几条是「分发路径」，给蓝。亮绿留给品牌和节点，蓝落在“路由”上——首屏就有了两支颜色，而不是一片亮绿铺到底。这两条线只在本页出现（认证页的轨道图另算）。 */ .orbit .links line { stroke: var(--blue); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawLink 1.8s var(--ease) forwards; } .orbit .links line:nth-child(1) { animation-delay: .10s; } .orbit .links line:nth-child(2) { animation-delay: .20s; } .orbit .links line:nth-child(3) { animation-delay: .30s; } .orbit .links line:nth-child(4) { animation-delay: .40s; } .orbit .links line:nth-child(5) { animation-delay: .50s; } .orbit .links line:nth-child(6) { animation-delay: .60s; } .orbit .links line:nth-child(7) { animation-delay: .70s; } .orbit .links line:nth-child(8) { animation-delay: .80s; } @keyframes drawLink { to { stroke-dashoffset: 0; } } .orbit .nodes .node { fill: var(--lime); transform-box: fill-box; transform-origin: center; animation: nodePulse 2.4s ease-in-out infinite; } .orbit .nodes .node:nth-child(1) { animation-delay: 0s; } .orbit .nodes .node:nth-child(2) { animation-delay: .3s; } .orbit .nodes .node:nth-child(3) { animation-delay: .6s; } .orbit .nodes .node:nth-child(4) { animation-delay: .9s; } .orbit .nodes .node:nth-child(5) { animation-delay: .2s; } .orbit .nodes .node:nth-child(6) { animation-delay: .5s; } .orbit .nodes .node:nth-child(7) { animation-delay: .8s; } .orbit .nodes .node:nth-child(8) { animation-delay: 1.1s; } @keyframes nodePulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.3); } } .orbit .core { fill: var(--lime); transform-box: fill-box; transform-origin: center; animation: corePulse 2s ease-in-out infinite; } @keyframes corePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } } .orbit .core-pulse { fill: none; stroke: var(--lime); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: ripple 2.6s ease-out infinite; } @keyframes ripple { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(7); opacity: 0; } } /* ============================================================ 按钮 ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 18px; border: 1px solid transparent; border-radius: 999px; background: var(--lime); color: var(--on-lime); font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; cursor: pointer; white-space: nowrap; transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; } .btn:hover { background: var(--lime-hover); color: var(--on-lime); text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 22px var(--lime-soft); } .btn.dark { background: var(--ink); color: var(--bg); } .btn.dark:hover { background: var(--bg); color: var(--ink); } .btn.ghost { background: transparent; border-color: var(--line); color: var(--ink); } .btn.ghost:hover { background: transparent; border-color: var(--lime); color: var(--lime-ink); box-shadow: none; } .btn.danger { background: var(--red); color: var(--on-red); } .btn.danger:hover { background: var(--red-hover); color: var(--on-red); box-shadow: 0 8px 22px var(--red-soft); } .btn.sm { padding: 5px 12px; font-size: 12.5px; gap: 5px; } /* 小按钮统一 28px 高。不补这一条的话，盒子的高度跟着内容走：有字的是 28px（12.5px 字 × 1.3 行高 ≈ 16px），只放一枚 14px 图标的是 26px。顶栏那一排按钮挨着排，「只放图标的比旁边矮两像素」是看得出来的。 */ .btn.sm { min-height: 28px; } .btn.lg { padding: 12px 26px; font-size: 15px; } .btn.block { width: 100%; } .btn[disabled], .btn.off { opacity: .55; cursor: not-allowed; pointer-events: none; transform: none !important; } .btn-link { background: none; border: 0; padding: 0; color: var(--lime-ink); cursor: pointer; font: inherit; font-size: 13.5px; } .btn-link:hover { text-decoration: underline; text-underline-offset: 4px; } .btn-link.danger { color: var(--red); } .btn-link.sm { font-size: 12.5px; } /* 纯文字动作：鼠标悬停才在底下长出一条线。用来替掉那些「其实不需要按钮壳子」的地方（顶栏的退出、操作列的查看…）。 */ .link-act { background: none; border: 0; padding: 2px 0; font: inherit; font-size: 13.5px; color: var(--muted); cursor: pointer; position: relative; white-space: nowrap; transition: color .18s ease; } .link-act::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .22s ease; } .link-act:hover, .link-act.on { color: var(--ink); text-decoration: none; } .link-act:hover::after, .link-act.on::after { transform: scaleX(1); } .link-act.danger:hover { color: var(--red); } .link-act.sm { font-size: 12.5px; } /* 一排等权的纯文字入口（快捷入口那种）。图标跟着文字一起变灰，悬停时才跟文字一起亮起来——避免一排彩色小图标又变成另一种「按钮」。 */ .link-row { display: flex; flex-wrap: wrap; gap: 10px 26px; } .link-row .link-act .ico { color: var(--muted-2); transition: color .18s ease; } .link-row .link-act:hover .ico { color: var(--lime-ink); } /* ============================================================ 表单 ============================================================ */ .field { margin-bottom: 15px; } .field > label, .lbl { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--muted); } .field .hint, .hint { color: var(--muted-2); font-size: 12px; margin-top: 6px; line-height: 1.6; } .req::after { content: " *"; color: var(--lime-ink); } /* 两个字段并排一行（注册页的「邮箱 + 用户名」）。认证页的卡片宽度是死的（.auth-card 上限 400px），所以桌面和手机的内容宽度差不多，一套排法两边通用。min-width:0 必须写 —— flex 项默认 min-width:auto 不肯缩到内容宽度以下，input 会把行撑破。窄到摆不下时靠 wrap 自动落回上下堆叠。 */ .field-pair { display: flex; flex-wrap: wrap; gap: 0 10px; margin-bottom: 15px; } .field-pair > .field { flex: 1 1 120px; min-width: 0; margin-bottom: 0; } input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=search], input[type=tel], input[type=date], input[type=time], input[type=datetime-local], select, textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-family: inherit; font-size: 13.5px; line-height: 1.5; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; } input::placeholder, textarea::placeholder { color: var(--muted-2); opacity: .7; } input:hover, select:hover, textarea:hover { border-color: var(--muted-2); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px var(--lime-soft); background: var(--surface-2); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; } input[disabled], select[disabled], textarea[disabled] { background: var(--line-soft); color: var(--muted-2); cursor: not-allowed; } textarea { min-height: 92px; resize: vertical; } /* 原生的下拉三角被 appearance:none 去掉了，这里用内联 SVG 补一个。 data URI 不是外部请求。里面的描边色只能写死（SVG 读不到 CSS 变量），两个主题各一份，都对着各自主题的 --muted-2（亮 #838a92 / 暗 #7d848c）；改 --muted-2 的时候记得同步这里。 */ :root { --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 4.6 6 8l3.4-3.4' fill='none' stroke='%23838a92' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } [data-theme="dark"] { --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 4.6 6 8l3.4-3.4' fill='none' stroke='%237d848c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } select { appearance: none; -webkit-appearance: none; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 11px center; padding-right: 32px; cursor: pointer; } select::-ms-expand { display: none; } /* 下拉展开后的选项是系统画的，给它一对主题色 */ select option { background: var(--surface); color: var(--ink); } input[type=checkbox], input[type=radio] { accent-color: var(--lime); } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .row.end { justify-content: flex-end; } .check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; font-weight: 400; } .check input { width: auto; } /* 开关 */ .switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; } .switch input { opacity: 0; width: 0; height: 0; } .switch span { position: absolute; inset: 0; background: var(--line); border-radius: 22px; transition: background .16s ease; cursor: pointer; } .switch span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: var(--bg); border-radius: 50%; transition: transform .16s ease; } .switch input:checked + span { background: var(--lime); } .switch input:checked + span::before { transform: translateX(18px); background: var(--on-lime); } .switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--lime-soft); } /* 分段选择（个人 / 团队注册） */ .seg { display: flex; gap: 8px; margin-bottom: 20px; } .seg label { flex: 1; text-align: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; color: var(--muted); transition: border-color .16s ease, color .16s ease, background .16s ease; } .seg input { display: none; } .seg input:checked + span { color: var(--lime-ink); } .seg label:has(input:checked) { border-color: var(--lime); background: var(--lime-soft); color: var(--lime-ink); } /* ============================================================ 表格 ============================================================ */ .tw { overflow-x: auto; } table.tb { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.tb th { text-align: left; font-weight: 600; color: var(--muted-2); font-size: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; letter-spacing: .02em; } table.tb td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } table.tb tr:last-child td { border-bottom: 0; } table.tb tbody tr { transition: background .14s ease; } table.tb tbody tr:hover { background: var(--surface-2); } table.tb .num { text-align: right; font-variant-numeric: tabular-nums; } table.tb .nowrap { white-space: nowrap; } table.tb .acts { display: flex; gap: 12px; align-items: center; white-space: nowrap; } /* 表格里的标识符（模型名、单号、密钥）走等宽，列才对得齐 */ table.tb .mono { font-size: 12.5px; } /* 表格里嵌的输入框（分段定价那两张表）不需要那么大 */ table.tb input, table.tb select { padding: 6px 9px; font-size: 12.5px; } /* ============================================================ 徽标 / 提示条 / 空状态 / 分页 / 标签页 ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; line-height: 19px; font-weight: 600; background: var(--surface-2); color: var(--muted); white-space: nowrap; } .badge.blue { background: var(--blue-soft); color: var(--blue-ink); } .badge.green { background: var(--ok-soft); color: var(--ok); } .badge.red { background: var(--red-soft); color: var(--red); } .badge.amber { background: var(--amber-soft); color: var(--amber); } .badge.dark { background: var(--lime); color: var(--on-lime); } /* 模型广场的筛选用徽标样式的链接：hover 出来下划线很难看，换成底色变化 */ a.badge:hover { text-decoration: none; background: var(--line); color: var(--ink); } a.badge.blue:hover { background: var(--blue); color: var(--on-blue); } a.badge.dark:hover { background: var(--lime-hover); color: var(--on-lime); } /* 按钮里的数字徽标：高度按按钮那一行算，不能把按钮顶高。同一个按钮「有未读」和「没未读」要是两种高度，数字一变就会跳一下。 .btn.sm 去掉徽标正好 28px 高，徽标也压到 16px 就还是 28px。 */ .btn > .badge { font-size: 11px; line-height: 16px; min-width: 16px; padding: 0 5px; justify-content: center; } /* 模型广场的筛选条：左边一个维度名，右边一串可选值。窄屏这一串会改成横向滑动（见 900px 断点），所以维度名得是一个不参与收缩的定宽盒子，宽度写在这儿，模板里不要再内联一遍。 */ .filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .filter-k { width: 44px; flex: none; font-size: 12.5px; color: var(--muted-2); } .alert { display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 16px; border: 1px solid transparent; } .alert.blue { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-ink); } .alert.green { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); } .alert.red { background: var(--red-soft); border-color: var(--red); color: var(--red); } .alert.amber { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); } .alert .ico { margin-top: 2px; } .alert a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .empty { text-align: center; padding: 52px 20px; color: var(--muted-2); } .empty .ico { color: var(--line); margin-bottom: 12px; } .empty p { margin: 0 0 14px; font-size: 13.5px; } .pager { display: flex; align-items: center; gap: 6px; padding: 14px 18px; flex-wrap: wrap; } .pager .spacer { flex: 1; } .pager a, .pager span.cur, .pager span.dis { min-width: 32px; height: 32px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; background: transparent; color: var(--muted); font-variant-numeric: tabular-nums; transition: border-color .16s ease, color .16s ease; } .pager a:hover { border-color: var(--lime); color: var(--lime-ink); text-decoration: none; } .pager span.cur { background: var(--lime); border-color: var(--lime); color: var(--on-lime); font-weight: 700; } .pager span.dis { color: var(--muted-2); opacity: .5; } .pager .info { color: var(--muted-2); font-size: 12.5px; font-variant-numeric: tabular-nums; } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 18px; overflow-x: auto; } .tabs a { padding: 11px 13px; font-size: 13.5px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .16s ease; } .tabs a:hover { color: var(--ink); text-decoration: none; } .tabs a.on { color: var(--lime-ink); border-bottom-color: var(--lime); font-weight: 600; } /* ============================================================ 弹层 / 轻提示 ============================================================ */ .mask { position: fixed; inset: 0; background: var(--mask); /* 手机上 100vh 是「大视口」——把地址栏会占掉的那块也算进去，于是这块蒙版比看得见的屏幕高，居中的弹窗会有一截落到屏幕外。 dvh 跟着可见视口走。上面那行是给不认 dvh 的浏览器兜底的。 */ height: 100vh; height: 100dvh; display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; } .mask.on { display: flex; } /* 弹窗是实心的：这里不用玻璃面，也不给蒙版加 blur。玻璃面在「整页固定层」上会撞见两件事，而且都只在这一层发生： 1) backdrop-filter 取「背景」时取的是整个文档，不是当前视口。页面越长偏得越多（接口文档是最长的一页），弹窗里会透出别处的正文，看着就是「穿屏」。 2) 公告正文是拿来读的（markdown 段落、表格、代码块）。背后一直有东西透上来，字和字之间没有干净的对比度，读起来累。弹窗里没有任何一处需要「看见背后」，所以直接铺实心面；上沿那道 --glass-edge 高光也一并去掉——没有玻璃就没有厚度。 */ .modal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); /* 上限跟着蒙版的内容盒走（= 可见视口减去上下那 20px 内边距），比写死 88vh 稳：换什么设备都不会顶出屏幕外。 */ width: 100%; max-width: 520px; max-height: 100%; overflow-y: auto; overflow-x: hidden; /* 宽内容（表格、代码块）不许顶出弹窗 */ box-shadow: var(--shadow-pop); animation: popIn .22s var(--ease); } @keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.99); } } .modal.wide { max-width: 760px; } .modal-head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; /* 标题栏和按钮栏是吸顶/吸底的，底下会有正文滚过去，所以必须铺一层和弹窗同色的实心面，否则两行字会叠在一起。 */ position: sticky; top: 0; background: var(--surface); z-index: 1; } .modal-head h3 { font-size: 15px; flex: 1; } .modal-body { padding: 20px; } .modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; gap: 10px; position: sticky; bottom: 0; background: var(--surface); } /* 公告弹窗里的一条条公告 */ .ann-item { padding: 14px 0; border-bottom: 1px dashed var(--line); } .ann-item:first-child { padding-top: 0; } .ann-item:last-child { border-bottom: 0; padding-bottom: 0; } .ann-item .doc-body { font-size: 13.5px; line-height: 1.8; } .ann-item .doc-body > :last-child { margin-bottom: 0; } /* 公告正文里带表格时，表格会按内容自己撑宽，把弹窗顶出一道横向溢出。弹窗已经 overflow-x:hidden，宁可让表格按容器宽度均分、字自己换行。 */ .ann-item .doc-body table { table-layout: fixed; font-size: 12.5px; } .ann-item .doc-body th, .ann-item .doc-body td { padding: 7px 9px; } /* 轻提示：一小条，贴在右上角。这里刻意不用玻璃面 —— 玻璃面（--surface-glass）和页面底几乎同一个明度，贴在角落会「化」进背景里，看不出是浮在上面的一层。改成一个比页面明显亮一档的实心面，配一道左侧色条：颜色交给色条，正文保持 --ink，不整条染色（一整块绿字、红字比消息本身还抢眼）。尺寸也收了一档：它是顺带看一眼的东西，不该和正文里的卡片一个体量。 */ #toast { position: fixed; top: 14px; right: 14px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: min(300px, calc(100vw - 28px)); pointer-events: none; /* 挡住底下的按钮比漏掉一次点击更烦人 */ } #toast .t { background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--muted-2); color: var(--ink); padding: 9px 13px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; box-shadow: var(--shadow-pop); animation: tin .18s ease-out; } #toast .t.ok { border-left-color: var(--ok); } #toast .t.err { border-left-color: var(--red); } @keyframes tin { from { opacity: 0; transform: translateY(-6px); } } /* ============================================================ 卡片 / 统计条 ============================================================ */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; } .card-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; } .card-head h3 { font-size: 14.5px; } .card-head .spacer { flex: 1; } .card-body { padding: 18px; } .card-body.tight { padding: 0; } /* ---- 工单对话：左右气泡 ---- 在这之前，用户端和管理端都是一张整宽的卡片，靠卡片左侧一条 3px 的边框区分是谁说的——扫一眼看不出对话的来回。现在按说话人分边：对方在左、自己在右，形状上就能读出来。气泡直接铺在页面底上（外面不套卡片）：对话本来就是这一页的主体，再套一层卡片就成了盒子里装盒子，而左边那条彩色描边也就没地方放了。 */ .tk-thread { display: flex; flex-direction: column; gap: 16px; } .tk-msg { display: flex; align-items: flex-start; gap: 10px; } .tk-msg.me { flex-direction: row-reverse; } /* 头像：一块圆角方块 + 一个字。配色跟着身份走，所以两个模板都只要挂一个 me / them 的类名，不用各自算颜色。 */ .tk-av { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--muted); } .tk-msg.them .tk-av { background: var(--blue-soft); color: var(--blue-ink); } .tk-msg.me .tk-av { background: var(--lime); color: var(--on-lime); } /* 气泡这一列：宽度上限压在 78%，两边都留出空白，一眼能看出靠哪边。自己那侧要让内容贴右，所以整列反过来排。 */ .tk-body { min-width: 0; max-width: 78%; } .tk-msg.me .tk-body { display: flex; flex-direction: column; align-items: flex-end; } .tk-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted-2); margin-bottom: 5px; } .tk-meta b { color: var(--ink); font-size: 12.5px; } .tk-bub { padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow-wrap: anywhere; } /* 靠近说话人那一角收小，读起来就是「从这边说出来的」 */ .tk-msg.them .tk-bub { border-top-left-radius: 3px; } .tk-msg.me .tk-bub { border-top-right-radius: 3px; } /* Markdown 渲染出来的块自带外边距，掐掉首尾两块，气泡上下的留白才是均匀的 */ .tk-bub > :first-child { margin-top: 0; } .tk-bub > :last-child { margin-bottom: 0; } .tk-bub p { margin: 0 0 10px; } /* 自己发的：实心亮绿 + 深色字。参考站那种整块平涂的用法，放在这里正合适——对话是这一页面积最大的东西，上色最有存在感。 */ .tk-msg.me .tk-bub { background: var(--lime); border-color: var(--lime); color: var(--on-lime); } /* 亮绿底上的链接和代码得跟着换：默认那支深绿是给白底配的，压在亮绿上就糊成一片了。 */ .tk-msg.me .tk-bub a { color: var(--on-lime); text-decoration: underline; } .tk-msg.me .tk-bub code { background: rgba(18, 20, 12, .12); color: var(--on-lime); } .tk-msg.me .tk-bub blockquote { border-left-color: rgba(18, 20, 12, .35); color: rgba(18, 20, 12, .82); } @media (max-width: 720px) { .tk-body { max-width: 86%; } .tk-av { width: 28px; height: 28px; font-size: 12px; } } /* 「更新于 xx:xx:xx」那颗时间戳，没刷过的时候是空的。空元素本身不占宽，但它在 flex 行里左右各要占掉一个 gap，所以刷之前那一行会多出两处空档。没内容就整个摘掉。 */ [data-ticket-updated]:empty { display: none; } /* 一整条仪表：外一圈描边，内部用发丝线分格，数字等宽、字号拉开。这样一屏里的数字自己就排成了列。 */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line-soft); /* 缝隙里透出来的这 1px 就是分隔线 */ border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; } .tile { background: var(--surface); padding: 15px 18px 16px; } .tile .k { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px; } .tile .k .ico { color: var(--muted-2); } .tile .v { font-size: 25px; font-weight: 700; margin-top: 5px; letter-spacing: -.02em; line-height: 1.25; font-variant-numeric: tabular-nums; /* 前台那几个大数字三支色轮着来（见文件顶部的位置轮转）。控制台和后台的数字不带 --acc，落回 --ink，保持中性。 */ color: var(--acc, var(--ink)); } .tile .s { color: var(--muted-2); font-size: 12px; margin-top: 3px; } /* 嵌在卡片里的时候（日志页筛选卡），左右两条边和圆角都去掉：卡片本身就是那个框，里面再套一个框就成了盒子里装盒子。 */ .card-body .tiles { border-left: 0; border-right: 0; border-radius: 0; } .card-body .tiles .tile { padding: 12px 14px; } .card-body .tiles .tile:first-child { padding-left: 0; } .card-body .tiles .tile:last-child { padding-right: 0; } /* 近 7 天消费：柱子的高度由 PHP 算好（模板不会算术），颜色交给 CSS，亮色暗色各自成立；没消费的那天用一条矮矮的底色柱占位。 */ .chart { display: flex; align-items: flex-end; gap: 10px; } .chart .col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; } .chart .col .v { font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; } .chart .col .b { width: 100%; max-width: 40px; background: linear-gradient(180deg, var(--lime), var(--blue)); border-radius: 4px 4px 0 0; } .chart .col.zero .b { background: var(--line); } .chart .col .d { font-size: 12px; color: var(--muted-2); } /* 一条进度条（团队额度、VIP 用量这类） */ .bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; } .bar > i { display: block; height: 100%; border-radius: 99px; background: var(--blue); } .bar.warn > i { background: var(--amber); } .bar.over > i { background: var(--red); } /* 控制台每页顶上那一条：左边标题 + 一句说明，右边一排操作按钮。之前每个页面各写各的行内样式，字号和间距都不太一样，这里统一掉。 */ .ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .ph h1 { font-size: 21px; letter-spacing: -.02em; } .ph .sub { color: var(--muted); font-size: 13px; margin-top: 6px; line-height: 1.7; } .ph .acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ============================================================ 控制台 / 后台布局 ============================================================ */ .app { display: flex; min-height: 100vh; } .side { width: var(--sidebar); flex: none; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .side-head { padding: 18px 18px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); } .side-head .name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; } /* 侧栏导航条目多的时候要能滚，但滚动条不能露出来—— 这条窄栏里杵一根灰色的槽，比内容本身还抢眼。滚轮和触摸照常可用。 */ .side-nav { flex: 1; overflow-y: auto; padding: 10px 10px 24px; scrollbar-width: none; -ms-overflow-style: none; } .side-nav::-webkit-scrollbar { width: 0; height: 0; } /* 分组名：中文不需要字距，密一点反而更整 */ .side-group { font-size: 11.5px; color: var(--muted-2); padding: 14px 10px 5px; } .side-nav a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; margin-bottom: 1px; border-radius: var(--radius-sm); color: var(--muted); font-size: 13.5px; position: relative; transition: background .16s ease, color .16s ease; } .side-nav a .ico { color: var(--muted-2); transition: color .16s ease; } .side-nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; } .side-nav a:hover .ico { color: var(--ink); } .side-nav a.on { background: var(--lime-soft); color: var(--lime-ink); font-weight: 600; } .side-nav a.on .ico { color: var(--lime-ink); } .side-nav a.on::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--lime); } .side-nav a .badge-dot { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: var(--on-red); font-size: 11px; line-height: 18px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .top { min-height: 60px; flex: none; background: var(--bg-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 8px 22px; position: sticky; top: 0; z-index: 20; } .top h2 { font-size: 15.5px; letter-spacing: -.01em; } .top .spacer { flex: 1; } /* 控制台 / 后台内容区：整宽自适应（原来卡在 1280px，宽屏右边空一大片）。表单类页面自己套 .wrap.narrow 限制行宽。 */ .wrap { padding: 24px 22px 48px; width: 100%; max-width: 100%; } .wrap.narrow { max-width: 880px; } /* ============================================================ 前台：顶栏（全站共享） ============================================================ */ .pub-top { height: var(--header-h); background: var(--bg-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 20px; padding: 0 var(--pad); position: sticky; top: 0; z-index: 30; } .pub-top .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: -.02em; color: var(--ink); flex-shrink: 0; } .pub-top .brand:hover { text-decoration: none; } .pub-top nav { display: flex; gap: 24px; } .pub-top nav a { color: var(--muted); font-size: 13.5px; position: relative; transition: color .18s ease; } .pub-top nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; transition: transform .22s ease; } .pub-top nav a:hover, .pub-top nav a.on { color: var(--ink); text-decoration: none; } .pub-top nav a:hover::after, .pub-top nav a.on::after { transform: scaleX(1); } .pub-nav-sep { display: none; } /* 只在移动端抽屉里当分隔线用 */ .pub-top .spacer { flex: 1; } /* 主题切换：两颗图标叠着放，CSS 按当前主题决定显示哪一颗（不需要 JS 参与渲染）。外形和顶栏那一排按钮**完全一致**——同高、同圆角、同描边、同悬停色。它没法直接挂 .btn（那样两枚图标会各占一格，除非再写一层 display:none），所以这里把 .btn.sm 那套盒子照抄一遍：5px 上下内边距 + 16px 图标 = 28px 高， 999px 圆角 = 和旁边那颗铃铛、那颗「免费注册」是同一种形状。以前这里是 36px 的正圆加悬停旋转，一排胶囊里就它一个圆，确实不统一。 */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 5px 12px; flex: none; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; transition: border-color .18s ease, color .18s ease; } .theme-toggle:hover { border-color: var(--lime); color: var(--lime-ink); } .theme-toggle .ico { display: none; } /* 露出的是「当前这支主题」的图标：没有属性 = 亮色 */ html:not([data-theme="dark"]) .theme-toggle .ico-sun { display: block; } html[data-theme="dark"] .theme-toggle .ico-moon { display: block; } /* 控制台顶栏的余额。原来用的是一颗 .badge——11.5px 字、19px 行高，夹在一排 28px 的按钮中间，比谁都矮一截、字也小一号，看着像从别的地方贴过来的。换成和按钮同一套盒子（同高、同圆角），蓝色留着：这颗的颜色是「这是钱」的意思，不是装饰。 */ .bal-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; flex: none; border: 1px solid transparent; border-radius: 999px; background: var(--blue-soft); color: var(--blue-ink); font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; } .pub-body { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 24px 72px; } .pub-foot { position: relative; z-index: 1; border-top: 1px solid var(--line); padding: 26px 24px; color: var(--muted-2); font-size: 12.5px; text-align: center; } .pub-foot a { color: var(--muted); } .pub-foot a:hover { color: var(--lime-ink); } /* ============================================================ 前台：首页 ============================================================ */ /* 首屏：左边一段话，右边一圈轨道图。轨道是绝对定位的装饰，不占栅格，所以窄屏（<900px）直接把它藏掉就行，文字不用重排。 */ .hero { position: relative; padding: clamp(52px, 9vh, 100px) 0 40px; overflow: hidden; } .hero-l { position: relative; z-index: 1; max-width: 46rem; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0; } .eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--lime); border-radius: 2px; flex-shrink: 0; } .hero-title { margin: 22px 0 0; font-size: clamp(38px, 5.6vw, 78px); line-height: 1; letter-spacing: -.045em; display: flex; flex-direction: column; } .hero-title span:last-child { color: var(--lime-ink); } .hero-sub { margin: 26px 0 0; max-width: 44ch; font-size: clamp(14px, 1.05vw, 16.5px); color: var(--muted); } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 0; } .hero-note { color: var(--muted-2); font-size: 12.5px; margin-top: 18px; } /* 404：整屏居中。数字用水印那么大的尺寸，但用描边色，别抢走按钮 */ .notfound { text-align: center; padding: clamp(60px, 14vh, 140px) 0 clamp(40px, 8vh, 80px); } .notfound-code { font-family: var(--mono); font-weight: 700; font-size: clamp(64px, 14vw, 148px); line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--line); margin-bottom: 18px; } .notfound h1 { font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -.03em; } .notfound p { margin: 12px 0 0; } .hero-orbit { position: absolute; right: -8%; top: 50%; transform: translateY(-50%); width: clamp(300px, 34vw, 520px); height: auto; opacity: .9; } /* 跑马灯：全宽出血，两边用遮罩化开 */ .marquee { position: relative; z-index: 1; margin: 0 calc(50% - 50vw); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding: 13px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; width: max-content; animation: marquee 34s linear infinite; } .marquee-track span { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; color: var(--muted); white-space: nowrap; padding-right: 46px; } .marquee-track span::before { content: "◆ "; color: var(--acc-fill, var(--lime)); font-size: 9px; } @keyframes marquee { to { transform: translateX(-50%); } } /* ---- 首页区块 ---- */ .section { padding: clamp(56px, 8vh, 88px) 0; border-bottom: 1px solid var(--line); } .section:last-of-type { border-bottom: 0; } .section-head { display: flex; align-items: baseline; gap: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; } /* 区块序号是页面从上到下的节拍器，三支色轮着来（序号本身在模板里就是写死的 00…06，所以那边直接挂 acc-1/2/3，比在这里数第几个兄弟靠谱）。 */ .section-index { color: var(--acc, var(--lime-ink)); } .section-label { color: var(--muted-2); } .section h2 { margin: 22px 0 0; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.035em; max-width: 20ch; } .section .lede { margin: 20px 0 0; max-width: 58ch; color: var(--muted); font-size: clamp(14px, 1vw, 16px); } /* ---- 卡片网格（1px 缝隙就是分隔线）---- 桌面端固定 3 列：卡是 6 张，3×2 正好铺满。用 auto-fit 的话最后一行会少一格，而少掉的那格会露出底下用作分隔线的深色底，看着像一块破洞。 */ .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 44px; } .gcard { background: var(--surface); padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 14px; min-height: 240px; transition: background .22s ease; } .gcard:hover { background: var(--surface-2); } .gcard .gcard-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .gcard h3 { font-size: 19px; letter-spacing: -.02em; line-height: 1.3; } .gcard p { margin: 0; flex: 1; color: var(--muted); font-size: 13.5px; } .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--muted-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; } .tag.hot { background: var(--lime); border-color: var(--lime); color: var(--on-lime); font-weight: 700; } .tag.blue { background: var(--blue); border-color: var(--blue); color: var(--on-blue); font-weight: 700; } .card-num { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); } /* 卡片图标：一块实心色块托着一枚描边图标，三张卡轮着用三支色。以前这里只有一圈 32px 的细描边，六张卡排开就是一排灰线—— 「颜色太少」有很大一部分是它贡献的。色块底是 .acc-N 给的实心色，图标描边取 --acc-on（压在实心色上的前景色），所以三支色都能这么用。进视口时把描边「画」出来（stroke-dashoffset 从 1 到 0），配合每个图元的 pathLength="1"，不用知道真实路径长度。 */ .gicon { width: 42px; height: 42px; padding: 9px; flex: none; border-radius: var(--radius-sm); background: var(--acc-fill, var(--lime)); fill: none; stroke: var(--acc-on, var(--on-lime)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .gicon :is(path, circle, rect, line) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease); } .gcard.in-view .gicon :is(path, circle, rect, line) { stroke-dashoffset: 0; } .gicon :is(path, circle, rect, line):nth-child(2) { transition-delay: .06s; } .gicon :is(path, circle, rect, line):nth-child(3) { transition-delay: .12s; } .gicon :is(path, circle, rect, line):nth-child(4) { transition-delay: .18s; } .gicon :is(path, circle, rect, line):nth-child(5) { transition-delay: .24s; } /* ---- 行列表：一列一段能力 ---- */ .rows { margin-top: 44px; border-top: 1px solid var(--line); } .rows .row-item { display: grid; grid-template-columns: 52px 1fr 1.4fr auto; gap: 22px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); transition: padding-left .26s ease; } .rows .row-item:hover { padding-left: 12px; } .row-num { font-family: var(--mono); font-size: 12px; color: var(--muted-2); letter-spacing: .08em; } .rows h3 { font-size: clamp(17px, 1.9vw, 25px); letter-spacing: -.03em; } .rows p { margin: 0; color: var(--muted); font-size: 13.5px; } /* 箭头是「往那边去」，跟上面那几条路由线一样走蓝，别再加一处亮绿 */ .row-arrow { color: var(--blue-ink); font-size: 16px; line-height: 1; opacity: 0; transform: translateX(-8px); transition: opacity .22s ease, transform .22s ease; } .rows .row-item:hover .row-arrow { opacity: 1; transform: translateX(0); } /* ---- 首页的代码块 ---- */ .code-block { margin-top: 44px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .code-block + .code-block { margin-top: 16px; } .code-head { display: flex; align-items: center; gap: 9px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); } .code-head i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .code-head i:nth-child(1) { background: var(--pink); } .code-head i:nth-child(2) { background: var(--blue); } .code-head i:nth-child(3) { background: var(--lime); } .code-head em { margin-left: 8px; font-style: normal; } .code-block pre { margin: 0; padding: 22px 18px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.85; color: var(--term-fg); background: var(--term); } .code-block pre .cmt { color: var(--term-dim); } .code-block pre .key { color: var(--lime); } /* ---- FAQ 手风琴 ---- */ .faq-list { margin-top: 44px; border-top: 1px solid var(--line); } .faq-list details { border-bottom: 1px solid var(--line); } .faq-list summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; font-size: clamp(15.5px, 1.4vw, 19px); font-weight: 600; letter-spacing: -.02em; transition: color .18s ease; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary:hover { color: var(--lime-ink); } .faq-list summary::after { content: "+"; font-family: var(--mono); font-weight: 400; color: var(--lime-ink); font-size: 22px; line-height: 1; flex-shrink: 0; transition: transform .26s var(--ease); } .faq-list details[open] summary::after { transform: rotate(135deg); } .faq-list details p { margin: 0; padding: 0 0 24px; max-width: 74ch; color: var(--muted); font-size: 14px; } /* ---- 页脚信号线 ---- */ .footer-signal { display: block; width: 100%; height: 72px; overflow: visible; } .footer-signal .draw { fill: none; stroke: var(--lime); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s var(--ease); } .footer-signal.in-view .draw { stroke-dashoffset: 0; } /* ---- 首页底部的行动区 ---- */ .foot-cta { padding: clamp(56px, 8vh, 88px) 0 0; } .foot-cta h2 { margin: 22px 0 0; font-size: clamp(28px, 4.6vw, 62px); line-height: 1.02; letter-spacing: -.04em; } .foot-cta h2 em { font-style: normal; color: var(--lime-ink); } /* ============================================================ 首页：鹈鹕骑行场景 ------------------------------------------------------------ 这块是全站唯一一个「插画」的地方，所以给它一扇窗户：桌面端是一整扇落地窗（整宽），手机端收窄成一扇小窗，场景本身放大到窗外去（跟原型的做法一致），看起来像在窗口里往外看。窗户里的颜色是插画自己的，不跟随主题——换主题时它不变，正好成了暗色页面里唯一一块亮色。 ============================================================ */ .ride-band { padding: clamp(40px, 6vh, 64px) 0 0; } .ride-window { margin-top: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-pop); } .ride-bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); } .ride-bar .dots { display: flex; gap: 6px; flex: none; } .ride-bar .dots i { width: 9px; height: 9px; border-radius: 50%; display: block; } .ride-bar .dots i:nth-child(1) { background: var(--pink); } .ride-bar .dots i:nth-child(2) { background: var(--blue); } .ride-bar .dots i:nth-child(3) { background: var(--lime); } .ride-bar .ride-bar-t { margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ride-bar .spacer { flex: 1; } .ride-scene { background: #e7efe6; overflow: hidden; line-height: 0; } .ride-scene svg { display: block; width: 100%; height: auto; } .ride-scene .ride-label { font-family: var(--font); letter-spacing: .1em; } .ride-ctrl { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); } .ride-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease; } .ride-btn:hover { border-color: var(--lime); color: var(--lime-ink); } .ride-btn[aria-pressed="true"] { background: var(--lime-soft); border-color: var(--lime); color: var(--lime-ink); } .ride-range-wrap { display: flex; align-items: center; gap: 10px; } .ride-range-wrap .rl { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); } .ride-range { appearance: none; -webkit-appearance: none; width: 132px; height: 3px; border-radius: 3px; background: var(--line); outline: none; cursor: pointer; } .ride-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--lime); border: 0; cursor: pointer; } .ride-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--lime); border: 0; cursor: pointer; } .ride-range:focus-visible { box-shadow: 0 0 0 3px var(--lime-soft); } .ride-speed-v { font-family: var(--mono); font-size: 12px; color: var(--lime-ink); min-width: 42px; font-variant-numeric: tabular-nums; } .ride-fold { display: none; } /* 只有窄屏才把小窗收起来 */ .ride-scene .spokes { opacity: .55; } /* 暂停 / 继续、收起 / 展开：两套文字都在 DOM 里，由 aria-pressed 决定露出哪一套——跟主题切换是同一个办法，切换时不用拼 HTML，脚本没跑到时按钮上也有正确的文字。 aria-pressed="true" 表示「已经处于被按下对应的状态」：暂停按钮按下 = 现在停着，于是按钮上写「继续」。 */ .ride-btn [data-ride-label="resume"], .ride-btn [data-ride-label="expand"] { display: none; } .ride-btn[aria-pressed="true"] [data-ride-label="pause"], .ride-btn[aria-pressed="true"] [data-ride-label="fold"] { display: none; } .ride-btn[aria-pressed="true"] [data-ride-label="resume"], .ride-btn[aria-pressed="true"] [data-ride-label="expand"] { display: inline-flex; } .ride-btn [data-ride-label] { align-items: center; gap: 6px; } .ride-btn [data-ride-label="pause"], .ride-btn [data-ride-label="fold"] { display: inline-flex; } .ride-window.folded .ride-scene { display: none; } /* 收起后天空只剩一条边，留一点点当提示 */ .ride-window.folded .ride-bar { border-bottom: 0; } /* ============================================================ 前台：模型广场 ============================================================ */ .mcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 17px; display: flex; flex-direction: column; gap: 10px; transition: border-color .18s ease, background .18s ease; } .mcard:hover { border-color: var(--lime); background: var(--surface-2); } .mcard .mh { display: flex; align-items: flex-start; gap: 11px; } .mcard .mh .logo { width: 34px; height: 34px; border-radius: var(--radius-sm); flex: none; display: flex; align-items: center; justify-content: center; background: var(--lime-soft); color: var(--lime-ink); font-weight: 700; font-size: 14px; overflow: hidden; } .mcard .mh .logo img { width: 100%; height: 100%; object-fit: contain; } /* break-all 会把 Qwen/Qwen2.5-72B-Instruct 从中间劈开，anywhere 只在真的放不下时才断——长模型名读起来还是完整的一串。 */ .mcard .mh .nm { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; } .mcard .mh .pv { color: var(--muted-2); font-size: 12px; } /* 简介固定截两行，但不再预留下限高度：只有一行时不该白占第二行的高度 */ .mcard .desc { color: var(--muted); font-size: 12.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 卡片里的价格三连（输入 / 输出 / 缓存命中）：做成一张不带框的三列小表，上下用发丝线压住，数字等宽，扫一眼就能比价。 */ .mcard .mprice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 0; } .mcard .mprice > div { min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 0 2px; } .mcard .mprice > div + div { border-left: 1px solid var(--line); padding-left: 10px; } .mcard .mprice .k { color: var(--muted-2); font-size: 11px; line-height: 1.3; } /* 价格数字是卡片里最容易被撑高的东西：格子只有 ~65px 宽， break-all 会把「0.0004」拦腰断成两三行，三列一起长高。 anywhere 只在整串放不下时才断，加上字号压到 12px、单位缩成 ¥/M，现在最长的价格也能一行放下。价格用强调色，是这一格里最该被看见的数。 */ .mcard .mprice b { font-size: 12px; font-weight: 700; color: var(--lime-ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } /* 价格单位：三列数字自己说不出单位，在网格上方说一次，比每张卡片里都写一遍干净（而且卡片本来就窄，塞不下）。 */ .mprice-unit { font-size: 12.5px; color: var(--muted-2); margin: 0 0 12px; } .mprice-unit b { color: var(--muted); font-weight: 600; } .mcard .foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted-2); } .mcard .foot .spec { color: var(--muted); font-variant-numeric: tabular-nums; } /* 同一行里的卡片高度一样，最后一行（按钮）压到底 */ .mcard > :last-child { margin-top: auto; } .mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; } /* 模型详情页头：名称一行，操作按钮另起一行。桌面端按钮跟名字同排（右边留白多，摆得下）；窄到一定程度就换行，按钮不跟名字抢横向空间——抢的结果就是名字被挤成两行。 */ .mhead { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .mhead-main { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; } .mhead-logo { width: 52px; height: 52px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--blue-light); color: var(--blue-ink); font-size: 20px; font-weight: 600; overflow: hidden; } .mhead-logo img { width: 100%; height: 100%; object-fit: contain; } .mhead-txt { flex: 1; min-width: 0; } .mhead-txt h1 { font-size: 21px; word-break: break-word; } .mhead-act { flex: none; margin-left: auto; } /* ============================================================ 统计图（条形 / 环形 / 折线） ------------------------------------------------------------ 三张图全都用同一份 PHP 算好的数据画：模板不会做算术，比例一律在 PHP 里算成百分比或 0-100 的整数，这里只负责把它们摆成形状。 ============================================================ */ /* ---- 折线图：横向的用量曲线 ---- 曲线画在一张 0 0 100 100 的坐标系里（preserveAspectRatio="none"），也就是说路径里的数字直接就是百分比，PHP 算出来是什么就是什么，不用去猜容器有多宽。代价是坐标系被横向拉伸，所以： · 曲线用 vector-effect="non-scaling-stroke"，线粗不被拉变形； · 数据点不用（圆会被拉成椭圆），改用绝对定位的 HTML 圆点。底部一排便签是普通的 flex 行，跟图分开。 */ .line-chart { margin: 6px 0 4px; } .line-chart .lc-wrap { position: relative; height: 140px; } .line-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .line-chart .lc-grid { stroke: var(--line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; } .line-chart .lc-area { fill: var(--lime-soft); stroke: none; } .line-chart .lc-path { fill: none; stroke: var(--lime); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } /* 圆心的填色用 --surface（卡片面）而不是 --bg（页面底）：这两张图都画在卡片里，用页面底会是一个比卡片暗一档的小灰点。悬停时圆心被填成实心，等于把「鼠标停在这个点上」画出来。 */ .line-chart .lc-pt { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--surface); border: 2px solid var(--lime); transition: background .14s ease; } .line-chart .lc-pt:hover { background: var(--lime); } .line-chart .lc-ax { display: flex; justify-content: space-between; margin-top: 9px; font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; } /* ---- 环形图：一段一段的占比。用 conic-gradient 画，不需要 SVG ---- 每一段的起止角度和颜色都由 PHP 算好，直接写成内联的 background。一段只占一两个百分点时颜色块会细成一根毛刺，所以给每段留 1.5% 的下限，宁可总和超过 100%（最后一小段被挤掉）也不要整段看不见。 */ .donut { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .donut-ring { position: relative; width: 132px; height: 132px; flex: none; border-radius: 50%; background: var(--line); } /* 环心挖空用的是卡片面（--surface）而不是页面底（--bg）：环形图只在卡片里出现，用页面底会是一圈比卡片暗的灰边。 */ .donut-ring::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; background: var(--surface); } .donut-hole { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .donut-hole .v { font-size: 19px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .donut-hole .k { font-size: 11.5px; color: var(--muted-2); } .donut-legend { flex: 1; min-width: 190px; display: flex; flex-direction: column; gap: 9px; } .donut-legend .lg { display: flex; align-items: center; gap: 9px; font-size: 13px; min-width: 0; } .donut-legend .sw { width: 9px; height: 9px; border-radius: 3px; flex: none; } .donut-legend .nm { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .donut-legend .vl { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; } /* 环形图的四种分段色：只有一个强调色，其余靠蓝/粉/琥珀点缀拉开，不引入第四个色相。顺序固定，按位置取色（第 1、5、9… 段同色），这样模板里不用拼 "c0/c1" 这种动态类名，色块的顺序天然和图例一致；圆环本身的颜色写在 conic-gradient 的内联 background 里，用的是同一组变量。 */ .donut-legend .lg:nth-child(4n+1) .sw { background: var(--lime); } .donut-legend .lg:nth-child(4n+2) .sw { background: var(--blue); } .donut-legend .lg:nth-child(4n+3) .sw { background: var(--pink); } .donut-legend .lg:nth-child(4n+4) .sw { background: var(--amber); } /* ---- 条形图：横向排名。条的长度同样是 PHP 算好的百分比 ---- */ .rank-list { display: flex; flex-direction: column; gap: 12px; } .rank-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; } .rank-row .nm { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rank-row .vl { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .rank-row .bar { grid-column: 1 / -1; height: 5px; } /* 排行条和上面的柱状图（.chart .col .b）用同一道渐变：条子越长越偏蓝。全是同一支绿的话，一列条子排下来就是一片同色，看不出「谁比谁多多少」以外的东西。 */ .rank-row .bar { position: relative; } /* 悬停浮层的定位基准 */ .rank-row .bar > i { background: linear-gradient(90deg, var(--lime), var(--blue)); } /* ---- 悬停浮层 ---- 图上那些小元素（折线图的数据点、排行条）太细，鼠标根本压不准，所以：热区靠一个透明的 ::before 撑开，气泡本身是 ::after 画的。全程不用 JS，内容从 data-tip 取。气泡用终端面那套深底浅字：两个主题下都读得清，也跟卡片拉开层次。 */ .lc-pt::before, .rank-row .bar::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); } .lc-pt::before { width: 26px; height: 26px; } .rank-row .bar::before { left: 0; right: 0; top: -7px; bottom: -7px; transform: none; } .lc-pt::after, .rank-row .bar::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%); z-index: 30; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--term); color: var(--term-fg); box-shadow: var(--shadow-pop); font-size: 11.5px; line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; pointer-events: none; transition: opacity .14s ease; } /* 没有内容就不画：不是每个排行条都会带 data-tip（比如团队页的额度条） */ [data-tip=""]::after, .rank-row .bar:not([data-tip])::after { display: none; } .lc-pt:hover::after, .rank-row .bar:hover::after { opacity: 1; } /* 首尾两个数据点贴着图的左右边缘，居中的气泡会探出卡片。两个端点各自朝外对齐，中间的照旧居中。 */ .lc-pt:first-of-type::after { left: 0; transform: none; } .lc-pt:last-of-type::after { left: auto; right: 0; transform: none; } /* 窄屏放不下单行气泡，允许折行；宽度按视口给，免得撑破卡片 */ @media (max-width: 720px) { .lc-pt::after, .rank-row .bar::after { white-space: normal; width: max-content; max-width: 52vw; } } /* ---- Token 消耗：按天堆叠的横条 ---- 一天一条，条内按输入 / 输出 / 缓存分三段；条子总长按这几天里最高的那天归一化（PHP 算好）。三段宽度之和就是 100%，不留空隙。 */ .bar.stack { display: flex; } .bar.stack > i { border-radius: 0; } .bar.stack > i:first-child { border-radius: 99px 0 0 99px; } .bar.stack > i:last-child { border-radius: 0 99px 99px 0; } .tok-in { background: var(--lime); } .tok-out { background: var(--blue); } .tok-cache { background: var(--pink); } /* Token 卡片的图例：一行小字 + 一枚色块 */ .tok-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; font-size: 12.5px; color: var(--muted); } .tok-legend .lg { display: flex; align-items: center; gap: 7px; } .tok-legend .sw { width: 9px; height: 9px; border-radius: 3px; flex: none; } /* ============================================================ 骨架屏 / 加载指示 ------------------------------------------------------------ 页面先把壳子画出来（服务端渲染，本来就有），需要等接口的地方用骨架占位 + 一条不断往前走的进度条，而不是转圈的菊花。 ============================================================ */ /* 骨架块：一条灰底，上面缓慢扫过一道高光 */ .sk { display: block; border-radius: var(--radius-sm); background: var(--surface-2); position: relative; overflow: hidden; } .sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--line-soft), transparent); transform: translateX(-100%); animation: skSweep 1.4s ease-in-out infinite; } @keyframes skSweep { to { transform: translateX(100%); } } .sk.line { height: 12px; margin-bottom: 9px; } .sk.line:last-child { margin-bottom: 0; width: 62%; } .sk.block { height: 88px; } .sk.num { width: 84px; height: 24px; } /* 三点 / 四点加载：一小排点轮流亮起来，比转圈的图标安静，放在按钮里和区块里都不突兀。 */ .dots-load { display: inline-flex; align-items: center; gap: 5px; } .dots-load i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); opacity: .28; animation: dotBlink 1.05s ease-in-out infinite; } .dots-load i:nth-child(2) { animation-delay: .16s; } .dots-load i:nth-child(3) { animation-delay: .32s; } .dots-load i:nth-child(4) { animation-delay: .48s; } @keyframes dotBlink { 0%, 100% { opacity: .28; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } } /* 顶栏下方那条加载进度：不确定进度的那种，来回走。往下错 2px 是让开 .page-progress —— 公开页顶上已经有一条滚动进度线，两条都贴在最上面会叠成一条，看起来像画错了。错开之后是干净的两层。 */ .load-bar { position: fixed; top: 2px; left: 0; right: 0; height: 2px; z-index: 210; background: transparent; overflow: hidden; display: none; } .load-bar.on { display: block; } .load-bar > i { display: block; height: 100%; width: 40%; background: var(--lime); animation: loadSlide 1.1s var(--ease) infinite; } @keyframes loadSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } /* 数据到位之前先占着位置的容器：.loading 期间显示骨架，去掉就显示真内容 */ [data-lazy] { transition: opacity .25s ease; } [data-lazy].loading { opacity: .55; } /* ============================================================ 密钥 / 代码展示 ============================================================ */ .code-box { display: flex; align-items: center; gap: 10px; background: var(--term); color: var(--term-fg); padding: 12px 14px; border-radius: var(--radius-sm); font-family: var(--mono); font-size: 13px; word-break: break-all; } .code-box .v { flex: 1; } .code-box .btn { background: var(--term-2); color: var(--lime); } .code-box .btn:hover { background: var(--lime); color: var(--on-lime); box-shadow: none; } pre.blk { background: var(--term); color: var(--term-fg); padding: 14px 16px; border-radius: var(--radius-sm); overflow-x: auto; font-size: 12.5px; line-height: 1.7; margin: 0; } /* 首页「三步接入」：内容本身就有先后，编号在这里是信息不是装饰 */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; } .step { border-top: 1px solid var(--line); padding-top: 13px; } .step .n { font-family: var(--mono); font-size: 12px; color: var(--acc, var(--lime-ink)); display: block; margin-bottom: 7px; } .step h4 { font-size: 14px; margin-bottom: 5px; } .step p { margin: 0; } /* 首页机房点缀：三张小图并排一条。图走样式表里的 background-image（相对 css/ 定位到 img/），模板那边不用新增任何 PHP 函数、也不用自己拼静态路径——站点装在子目录里同样找得到。三张原图明暗差得远，所以各自压一档亮度、统一降饱和，摆在一起才像一组；底边再压一道深色渐变收口，免得像三张贴纸拍在页面上。照片一律走 ::before 承载：filter 加在伪元素上，边框的颜色才不会被一起改掉。 */ .shots-cap { color: var(--muted-2); font-size: 12.5px; margin: 0 0 10px; } .shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .shot { position: relative; overflow: hidden; height: 132px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); } .shot::before { content: ''; position: absolute; inset: 0; background-size: cover; background-position: center; } .shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 17, 20, 0) 46%, rgba(15, 17, 20, .5)); } .shot-a::before { background-image: url(../img/hall-cable.jpg); filter: saturate(.72) brightness(1.08); } .shot-b::before { background-image: url(../img/hall-blue.jpg); filter: saturate(.58) brightness(1.14); } .shot-c::before { background-image: url(../img/hall-bays.jpg); filter: saturate(.50) brightness(.94); } @media (max-width: 720px) { /* 窄屏三张并排只剩指头宽，压矮一点，当一条纹理看 */ .shot { height: 96px; } } /* ============================================================ 前台：认证页（登录 / 注册 / 找回密码 / 重置密码） ------------------------------------------------------------ 四个页面共用同一套外壳（auth_top / auth_bottom），所以左右分栏只在这里做一次，四页一起变。左栏四页内容完全一样，页与页的差别全在右栏的 page_title / page_sub 上。左栏的底走 --term（近黑中性面）：这支面两个主题下都是深色，压在上面的三支强调色就不用分主题各调一遍。注意深底上**不能**用 --acc（那支「墨」是按浅底调的，压在近黑上不够亮），左栏里只用 --acc-fill / --acc-on 做实心色块，文字一律走 --term-fg / --term-dim。 */ .auth-card { width: 100%; max-width: 400px; } .auth-shell { position: relative; z-index: 1; min-height: 100vh; display: grid; /* 用户说的是「左 75% / 右 35%」，加起来 110%，落到实现上就是「左三分之二、右三分之一」。右栏给 360px 下限，保证表单在任何宽度下都不被挤扁，左栏吃掉剩下的——比写死百分比稳。 */ grid-template-columns: minmax(0, 1.85fr) minmax(360px, 1fr); } /* ---- 左栏：路由图 + 主张 + 三条卖点 ---- */ .auth-art { display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 40px clamp(32px, 4vw, 64px); /* 底 = 主题里的中性面，再压一层淡绿→淡蓝的斜向渐变。两个色都是 --*-soft（主题令牌），所以切主题时这一整块跟着翻——之前这里写死了 --term（两个主题都是近黑），就成了「右半边在变、左半边不动」。 */ background: linear-gradient(152deg, var(--lime-soft), var(--surface-2) 48%, var(--blue-soft)); border-right: 1px solid var(--line); } .art-in { width: 100%; max-width: 600px; } /* 图的高度跟着视口走。左栏是 grid 里的一格、又开了 overflow:hidden，它的高度就是 100vh——图要是按宽度等比撑开，在 768 高的笔记本上整块内容会比窗口高，底下那条卖点会被裁掉。给一个 clamp 上限之后， SVG 自己按 preserveAspectRatio 缩到框里，短屏也不会溢出。 */ .art-fig { height: clamp(200px, 32vh, 360px); max-width: 560px; margin: 0 auto 28px; } /* overflow:visible —— 入场动画会把几组图形往左推 12px，SVG 默认是裁掉的，被裁的那几帧看着像缺了一块。外层的 .auth-art 还会再兜一道。 */ .art-svg { display: block; width: 100%; height: 100%; overflow: visible; } /* 三个协议入口：实心强调色块，里面三条浅色短杠当「请求体」。色块走 acc-1/2/3（--acc-fill / --acc-on），两个主题都是同一套语义。 */ .auth-art .g-chip .chip { fill: var(--acc-fill, var(--lime)); } .auth-art .g-chip .bar { fill: var(--acc-on, var(--on-lime)); opacity: .42; } /* 整张图是「装配」出来的：连线 → 三个入口 → 网关 → 上游节点，一档一档错开入场，之后各自持续动。 */ .auth-art .g-chip { animation: artChipIn .55s var(--ease) both; } .auth-art .g-chip.acc-2 { animation-delay: .1s; } .auth-art .g-chip.acc-3 { animation-delay: .2s; } .auth-art .g-links { animation: artChipIn .55s var(--ease) .12s both; } .auth-art .g-gw { animation: artChipIn .55s var(--ease) .28s both; } .auth-art .g-halo, .auth-art .g-nodes { animation: artChipIn .55s var(--ease) .34s both; } @keyframes artChipIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } } /* 七条连线按三色轮转，虚线一直往前流，看着像请求在往外走。周期 16（实线 7 + 空隙 9），位移取 32 —— 整数倍周期，循环时接得上。 */ .auth-art .g-links path { fill: none; stroke-width: 1.7; stroke-dasharray: 7 9; animation: artFlow 1.5s linear infinite; } .auth-art .g-links path:nth-child(3n+1) { stroke: var(--lime); } .auth-art .g-links path:nth-child(3n+2) { stroke: var(--blue); } .auth-art .g-links path:nth-child(3n+3) { stroke: var(--pink); } .auth-art .g-links path:nth-child(2) { animation-delay: .12s; } .auth-art .g-links path:nth-child(3) { animation-delay: .24s; } .auth-art .g-links path:nth-child(4) { animation-delay: .36s; } .auth-art .g-links path:nth-child(5) { animation-delay: .48s; } .auth-art .g-links path:nth-child(6) { animation-delay: .60s; } .auth-art .g-links path:nth-child(7) { animation-delay: .72s; } @keyframes artFlow { to { stroke-dashoffset: -32px; } } /* 右边四个上游节点：呼吸 + 外面一圈慢慢转的虚线圈 */ .auth-art .g-halo circle { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; transform-box: fill-box; transform-origin: center; animation: spin 30s linear infinite; } .auth-art .g-nodes circle { transform-box: fill-box; transform-origin: center; animation: nodePulse 2.4s ease-in-out infinite; } .auth-art .g-nodes circle:nth-child(4n+1) { fill: var(--lime); } .auth-art .g-nodes circle:nth-child(4n+2) { fill: var(--blue); animation-delay: .3s; } .auth-art .g-nodes circle:nth-child(4n+3) { fill: var(--pink); animation-delay: .6s; } .auth-art .g-nodes circle:nth-child(4n+4) { fill: var(--lime); animation-delay: .9s; } /* 中间那圈网关：外面一圈虚环在转，核心是品牌绿在跳，一圈涟漪往外扩。涟漪只扩到 3.2 倍（≈45），正好落在虚环里面——首页那支 ripple 扩到 7 倍，在这张图上会盖住左边的入口，所以这里另配一支。 */ .auth-art .g-ring { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 7; transform-box: fill-box; transform-origin: center; animation: spin 26s linear infinite; } .auth-art .g-ring-2 { stroke: var(--lime); stroke-width: 1; opacity: .45; } .auth-art .g-core { fill: var(--lime); transform-box: fill-box; transform-origin: center; animation: corePulse 2s ease-in-out infinite; } .auth-art .g-pulse { stroke: var(--lime); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: artRipple 2.6s ease-out infinite; } @keyframes artRipple { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3.2); opacity: 0; } } .art-h { margin: 0 0 12px; color: var(--ink); font-size: clamp(21px, 2.2vw, 29px); line-height: 1.35; letter-spacing: -.03em; } .art-sub { margin: 0 0 26px; color: var(--muted); font-size: 13.5px; line-height: 1.75; } .art-pts { display: flex; flex-direction: column; gap: 15px; } .art-pt { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 5px; align-items: center; } .art-ico { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--acc-fill, var(--lime)); color: var(--acc-on, var(--on-lime)); } .art-pt b { color: var(--ink); font-size: 14px; } .art-tx { color: var(--muted); font-size: 12.5px; line-height: 1.65; } /* ---- 右栏：表单 ---- */ .auth-pane { display: flex; padding: 32px 24px; overflow-y: auto; /* 保险：万一哪天被压得比表单矮，也别把顶部裁掉 */ } /* 居中靠 margin:auto，**不是** align-items:center —— 后者在内容比容器高的时候会把顶部挤出可视区、而且滚不上去（注册表单一长就撞这个）。 */ .auth-pane .auth-card { margin: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; } /* 认证页没有顶栏，主题切换单独浮在右上角 */ .auth-theme { position: fixed; top: 18px; right: 18px; z-index: 40; background: var(--bg-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--glass-edge); } .auth-card h1 { font-size: 19px; text-align: center; margin-bottom: 6px; } .auth-card .sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 22px; } .auth-card .foot { text-align: center; margin-top: 20px; font-size: 13px; color: var(--muted); } /* 窄屏：左栏只是装饰，留着纯占屏，整个收起来退回单栏居中。 */ @media (max-width: 900px) { .auth-shell { grid-template-columns: minmax(0, 1fr); } .auth-art { display: none; } /* 手机上的抱怨是「上下滑动实在是不让人好」——注册页七个输入框，原来四周 32/24 的内缩 + 卡片 30 的内缩 + 每个字段 15 的下间距，一屏放不下，要翻两三次。这里整体压一档，大约省下 90px 高度。 **只作用于 .auth-card 之内**：.field 是全站公共类，直接改它会波及控制台和后台的所有表单，那不是这次要动的地方。 */ .auth-pane { padding: 20px 14px; } .auth-pane .auth-card { padding: 22px 18px; } .auth-card h1 { font-size: 17px; } .auth-card .sub { margin-bottom: 14px; } .auth-card .field { margin-bottom: 11px; } .auth-card .field-pair { margin-bottom: 11px; } .auth-card .seg { margin-bottom: 14px; } .auth-card .foot { margin-top: 14px; } /* 卡片已经顶到屏幕边，右上角那颗主题按钮跟着往角上收一收，别压住卡片 */ .auth-theme { top: 10px; right: 10px; } } /* ============================================================ 接口文档：左侧目录 + 正文 ============================================================ */ .docs-layout { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 20px; align-items: start; } .docs-side { background: var(--surface-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .docs-side::-webkit-scrollbar { width: 0; height: 0; } .docs-search { margin-bottom: 12px; } .docs-group { margin-bottom: 6px; } .docs-group-name { font-size: 11.5px; color: var(--muted-2); padding: 12px 8px 5px; } .docs-link { display: block; padding: 7px 9px; border-radius: var(--radius-sm); color: var(--muted); font-size: 13.5px; line-height: 1.5; } .docs-link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; } .docs-link.on { background: var(--lime-soft); color: var(--lime-ink); font-weight: 600; } .docs-link .t { display: block; } .docs-link .s { display: block; color: var(--muted-2); font-size: 12px; margin-top: 3px; } .docs-main { min-width: 0; } /* 窄屏的文档二级菜单（一级分组 / 二级篇目）。桌面端不显示：侧栏本来就是一整列铺开，不需要它。 */ .docs-tabs { display: none; } /* markdown 正文（文档页、公告页、公告弹窗共用） */ .doc-body { font-size: 14px; line-height: 1.85; color: var(--muted); } .doc-body h2 { font-size: 18px; margin: 26px 0 10px; color: var(--ink); } .doc-body h3 { font-size: 15.5px; margin: 22px 0 8px; color: var(--ink); } .doc-body h4 { font-size: 14px; margin: 16px 0 6px; color: var(--ink); } .doc-body p { margin: 0 0 12px; } .doc-body ul, .doc-body ol { margin: 0 0 12px; padding-left: 22px; } .doc-body li { margin-bottom: 5px; } .doc-body code { background: var(--surface-2); padding: 1px 6px; border-radius: 4px; font-size: 12.5px; color: var(--ink); } .doc-body pre.blk { margin: 0 0 14px; } .doc-body pre.blk code { background: none; padding: 0; color: inherit; } .doc-body table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13px; word-break: break-word; } .doc-body th, .doc-body td { border: 1px solid var(--line); padding: 8px 11px; text-align: left; } .doc-body th { background: var(--surface-2); font-weight: 600; color: var(--muted); } .doc-body h2:first-child, .doc-body h3:first-child { margin-top: 0; } .doc-body mark { background: var(--amber-soft); color: var(--amber); padding: 0 2px; border-radius: 3px; } .doc-body a { color: var(--lime-ink); } /* ============================================================ 工具类 ============================================================ */ .spacer { flex: 1; } .muted { color: var(--muted); } .dim { color: var(--muted-2); } .sm { font-size: 12.5px; } .b { font-weight: 600; } .mt0 { margin-top: 0; } .mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } .mb0 { margin-bottom: 0; } .mb8 { margin-bottom: 8px; } .mb16 { margin-bottom: 16px; } .mb24 { margin-bottom: 24px; } .tc { text-align: center; } .tr { text-align: right; } .flex { display: flex; } .between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .gap8 { gap: 8px; } .gap12 { gap: 12px; } .wrapf { flex-wrap: wrap; } .hide { display: none !important; } .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .divider { height: 1px; background: var(--line); margin: 16px 0; } .nowrap { white-space: nowrap; } /* ============================================================ 响应式显隐同一件事两端各有各的位置（比如「进控制台」：电脑端在右上角按钮组，手机端在抽屉里），两边都摆就会出现重复的文字按钮。两类： .m-only 手机端专属（电脑端藏）—— 抽屉里的导航/账号入口 .d-only 电脑端专属（手机端藏）—— 右上角那组按钮 ============================================================ */ .m-only { display: none; } /* ============================================================ 移动端左侧抽屉 ============================================================ */ .nav-toggle { display: none; } /* 桌面端不显示 */ .drawer-mask { position: fixed; inset: 0; z-index: 55; background: var(--mask); opacity: 0; visibility: hidden; transition: opacity .2s ease; } .drawer-mask.on { opacity: 1; visibility: visible; } @media (max-width: 900px) { .nav-toggle { display: inline-flex; } /* 抽屉里的入口：手机端显示（抽屉是纵向 flex，块级即可） */ .m-only { display: block; } /* 右上角那组按钮：手机端收进抽屉，别再挤在顶栏上 */ .d-only { display: none; } /* 侧栏 → 左侧抽屉。**不透明**：抽屉是盖在正文上的一整列导航，半透明那版能透过它看见底下的正文，两层字叠在一起，读起来是乱的。正文上的那层压暗交给 .drawer-mask，抽屉自己必须是不透的。 */ /* 高度一律用 dvh：手机上 100vh 是「大视口」（含地址栏会占掉的那块），抽屉会比看得见的屏幕高一截，底部那几条导航落在屏幕外，怎么滑都够不着——就是「导航栏没法上下滑动」的那个毛病。前一行是给不认 dvh 的浏览器兜底的。 */ .side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; width: 268px; flex-direction: column; height: 100vh; height: 100dvh; background: var(--surface); border-right: 1px solid var(--line); transform: translateX(-100%); transition: transform .22s ease; } .side.open { transform: none; box-shadow: var(--shadow-pop); } /* 滚到底就是到底，别把这段惯性传给背后的正文 */ .side-nav { overscroll-behavior: contain; } /* 前台导航 → 左侧抽屉。同上：不透明，靠 .drawer-mask 压暗正文。 */ .pub-top .pub-nav { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; width: 250px; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 2px; align-items: stretch; background: var(--surface); border-right: 1px solid var(--line); /* 顶上原来留 78px 让底下的顶栏透出来，现在抽屉是不透的，那 78px 只会是一段空的色块——收掉，链接直接从顶上开始。 */ padding: 20px 12px 24px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; transform: translateX(-100%); transition: transform .22s ease; } .pub-top .pub-nav::-webkit-scrollbar { width: 0; height: 0; } .pub-top .pub-nav.open { transform: none; box-shadow: var(--shadow-pop); } .pub-top .pub-nav a { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; } .pub-top .pub-nav a::after { display: none; } .pub-top .pub-nav a:hover, .pub-top .pub-nav a.on { background: var(--lime-soft); color: var(--lime-ink); } .pub-nav-sep { display: block; height: 1px; background: var(--line); margin: 8px 4px; } .wrap { padding: 18px 16px 40px; } .grid2, .grid3 { grid-template-columns: 1fr; } .docs-layout { grid-template-columns: 1fr; } /* 侧栏不再吸顶、不再限高：窄屏它是正文上面的一段，不是旁边的一列 */ .docs-side { position: static; max-height: none; padding: 12px; } /* 文档正文里的表格：列一多、字一长，表格会自己撑得比屏幕还宽，而 body 是 overflow-x:hidden——多出来的那几列直接被裁掉，怎么划都看不到，等于白写了几列。窄屏强制按容器宽度均分，字在格子里自己换行。 */ .doc-body table { table-layout: fixed; font-size: 12.5px; } .doc-body th, .doc-body td { padding: 7px 9px; } /* 模型广场的筛选条（类型 / 标签 / 分组）：十来个徽标一路换行，三行糊成一片，分不清哪一排是哪个维度，一屏还占掉小半屏。窄屏改成一行横着滑，维度名钉在左边不跟着滑走。钉住的时候会有一小段底色盖不住的缝（.row 的 gap 在盒子外面），用一道没模糊的投影把缝补上——不占布局，也不会把行撑宽。 */ .filter-row { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; /* 滑到头别再触发浏览器返回手势 */ scrollbar-width: none; -ms-overflow-style: none; } .filter-row::-webkit-scrollbar { height: 0; } .filter-row .filter-k { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 10px 0 0 var(--surface); } /* 文档页的二级菜单。原来窄屏是把整列目录（十几个分组、几十条链接）铺在正文前面，要往下滚一整屏才看得见第一个字——所以窄屏改成两级：上面一排分组，下面只放当前这一组的篇目。横向那排不显示滚动条（跟抽屉、移动端导航一个处理）。 */ .docs-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 10px; margin-bottom: 2px; scrollbar-width: none; -ms-overflow-style: none; } .docs-tabs::-webkit-scrollbar { width: 0; height: 0; } .docs-tab { flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-family: var(--font); font-size: 13px; white-space: nowrap; cursor: pointer; } .docs-tab[aria-selected="true"] { background: var(--lime); border-color: var(--lime); color: var(--on-lime); font-weight: 600; } /* 分组名和上面那排 tab 是同一句话，窄屏只留一处 */ .docs-group[data-docs-group] .docs-group-name { display: none; } .docs-group[data-docs-group] { margin-bottom: 0; } .hero { grid-template-columns: 1fr; gap: 26px; padding: 34px 0 30px; } .hero-orbit { display: none; } .hero-actions .btn { flex: 1; justify-content: center; } .steps { grid-template-columns: 1fr; gap: 20px; } .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile .v { font-size: 22px; } .pub-body { padding: 0 16px 56px; } .rows .row-item { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; } .row-num, .row-arrow { display: none; } /* 六张卡片竖着排。原来窄屏仍是三列，等于每张卡只有一百来像素宽，标题和正文被挤成一条一条的——不如老老实实一列。 */ .card-grid { grid-template-columns: 1fr; } .gcard { min-height: auto; } .gcard h3 { font-size: 17px; } .mhead-act { margin-left: 0; width: 100%; } .mhead-act .btn { width: 100%; } .section h2 { font-size: clamp(24px, 7vw, 32px); } /* 顶栏是抽屉的父级，z-index 只在父级层叠上下文里比较，所以父级要抬到遮罩之上，抽屉才不会被遮罩盖住。 */ .pub-top { gap: 10px; padding: 0 14px; z-index: 60; } /* 鹈鹕场景收成一扇小窗：场景放大到窗外去，两边裁掉，自行车反而更大更清楚（原型在窄屏就是这么处理的）。 */ .ride-window { box-shadow: none; } .ride-scene svg { width: 168%; margin-left: -34%; } .ride-ctrl { gap: 10px; row-gap: 12px; padding: 12px 14px; } .ride-fold { display: inline-flex; } .ride-range { width: 100px; } .ride-bar .ride-bar-t { display: none; } } @media (max-width: 720px) { :root { --header-h: 62px; } .top { padding: 8px 14px; } /* 控制台顶栏那行标题：窄屏上后面的余额、公告、退出会把标题挤到换行，所以标题限定不换行、超长省略；右侧那组图标在小屏也收一收。 */ .top h2 { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .top { gap: 8px; } .wrap { padding: 16px 14px 36px; } .card-body { padding: 15px; } .modal-foot { flex-wrap: wrap; } .mask { padding: 14px; } /* 标题 + 日期那一行：窄屏放不下就换行，别把日期挤出去 */ .ann-item .between { flex-wrap: wrap; } /* 控制台顶栏在小屏本来就挤（菜单 / 标题 / 余额 / 切换 / 公告 / 退出六样）。余额把钱包图标收掉、内边距收一档，省下的二十来个像素留给页面标题—— 标题是这一页唯一说明「你在哪」的东西，不该被余额挤成省略号。 */ .bal-chip { padding: 0 9px; } .bal-chip .ico { display: none; } /* 工单的输入框：新建那张 rows="10"、回复那张 rows="6"，在手机上是一整屏的大半——打开页面先看到一大块空白的输入区，正文反倒被挤出屏幕。rows 是写在属性上的，改不了断点，这里用 CSS 高度压到五行的样子。 resize:vertical 一并去掉：手机上根本没有那个拖拽把手，留着只是右下角多一道斜纹。 */ .ticket-ta { height: 118px; resize: none; } /* 回复框底下那一行：电脑端是「提示语 …… 刷新更新时间发送」一条排开，手机上会折成三行，时间戳还会自己孤零零占一行中间。改成两行——上面「刷新 + 更新时间」靠右，下面发送按钮独占一行。 */ .tk-acts .btn { width: 100%; } .ph { margin-bottom: 14px; } .ph h1 { font-size: 19px; } .ph .acts { width: 100%; } } /* 系统设了「减少动态效果」就都别动 */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .entry-ring, .entry-core, .orbit .ring, .orbit .nodes .node, .orbit .core, .orbit .core-pulse, .orbit .links line, .marquee-track { animation: none !important; } .gicon :is(path, circle, rect, line), .footer-signal .draw, .orbit .links line, .orbit .nodes .node { stroke-dashoffset: 0 !important; transition: none !important; } /* 加载指示原本靠动，被禁掉之后要换个「静止也说得清」的样子：进度条铺满一格当底色，圆点全部点亮——不然三个半透明的点看起来就像正文里的省略号，谁也认不出这是在加载。 */ .load-bar > i { width: 100%; opacity: .5; } .dots-load i { opacity: .75; } }