/* ========================================================================== LightSpider WebUI · 设计 Token(石墨蓝主题)+ 组件类 + 布局壳 来源:2026-07 改版,视觉语言对齐 LightStudio 设计交接包(UIUX design brief)。 默认深色; 切浅色(刻意灰白、忌纯白;首屏内联脚本防闪)。 所有颜色一律走变量,组件内不写死 hex;变量名是全站 API,只改值不改名。 ========================================================================== */ :root{ color-scheme:dark; /* —— 底层与表面(石墨:bg-0/1/2/3 分层)—— */ --bg:#101216; --surface-1:#16191f; /* 面板/卡 */ --surface-2:#1c2027; /* 凸起/行 */ --surface-3:#0c0e12; /* 内凹:输入框/pre/骨架(语义=比卡更暗) */ --surface-4:#232833; /* 悬停/选中(新增档位) */ --border:#2a2f3a; --border-strong:#363c48; --canvas:#101216; /* —— 文字 —— */ --fg:#e8eaef; --fg-muted:#a2a9b7; --fg-subtle:#7b828f; /* —— 主强调(石墨蓝)—— */ --accent:#5b83ff; --accent-hover:#7396ff; --accent-press:#4a70e8; --accent-fg:#ffffff; --accent-soft:rgba(91,131,255,.14); /* —— 状态八色(形状+颜色+文字三重编码的颜色轴)—— */ --st-run:#5b83ff; /* ● 运行中/active */ --st-queue:#8b93a3; /* ○ 排队/等待/已取消 */ --st-ok:#45c08a; /* ✓ 成功/ready/done */ --st-fail:#f0616d; /* ✕ 失败 */ --st-warn:#e2a13c; /* ▲ 需人工/blocked/paused */ --st-unknown:#e6c14b; /* ▲ 归属未知 */ --st-pub:#37b6c4; /* ● 发布/进行中的提交 */ --st-int:#a883f0; /* ‖ 中断 */ /* —— 旧语义别名(旧组件免费重绘)—— */ --ok:var(--st-ok); --warn:var(--st-warn); --danger:var(--st-fail); --info:var(--st-run); /* —— 平台徽章 —— */ --plat-bili:#6c9fd8; --plat-douyin:#4fc2b4; --plat-xhs:#e8798c; --plat-course:#c9a86a; --plat-youtube:#d08a66; --plat-tiktok:#8b93a3; /* —— 雷达事件(三类;常青/爆发对齐状态色系)—— */ --ev-follow:#ef8088; --ev-evergreen:var(--st-ok); --ev-burst:var(--st-int); /* —— 图谱生命周期(五阶段)—— */ --lc-rising:var(--warn); --lc-evergreen:var(--ev-evergreen); --lc-saturated:var(--fg-subtle); --lc-blue:var(--info); --lc-gap:var(--ev-burst); /* —— 资产类型(六类)—— */ --at-story:#d99a6f; --at-case:#7fa8e0; --at-data:#45c08a; --at-quote:#d4b86a; --at-metaphor:#a883f0; --at-qa:#37b6c4; /* —— 四席顾问 —— */ --seat-chatgpt:#a2a9b7; --seat-claude:#e0894f; --seat-gemini:#4f9be8; --seat-mimo:#d15f6b; /* —— 阴影 —— */ --shadow-1:0 1px 2px rgba(0,0,0,.42); --shadow-2:0 12px 30px rgba(0,0,0,.42); /* —— 圆角梯(4/6/10/14)—— */ --r-badge:4px; --r-btn:6px; --r-card:10px; --r-panel:14px; --r-pill:999px; /* —— 间距(4 基准)—— */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; /* —— 字体:IBM Plex 自托管(Google Fonts 被墙),中文回落系统苹方。 serif 变量保留但指向 sans(新设计弃衬线标题,旧引用不炸)。 —— */ --font-sans:'IBM Plex Sans','PingFang SC','Microsoft YaHei',system-ui,-apple-system,sans-serif; --font-serif:'IBM Plex Sans','PingFang SC','Microsoft YaHei',system-ui,-apple-system,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,Menlo,'PingFang SC',monospace; } /* 浅色主题(昼)——刻意灰白,忌纯白;小字号文字色按 4.5:1 对比度实测压暗 */ :root[data-theme="light"]{ color-scheme:light; --bg:#dee1e6; --surface-1:#e7e9ee; --surface-2:#edeff4; --surface-3:#d7dae1; --surface-4:#d3d7de; --border:#ced3da; --border-strong:#bbc1cb; --canvas:#dee1e6; --fg:#2a2e36; --fg-muted:#575e69; --fg-subtle:#6b717c; --accent:#3c56c8; --accent-hover:#344cb6; --accent-press:#2c42a2; --accent-fg:#ffffff; --accent-soft:rgba(60,86,200,.12); --st-run:#3c56c8; --st-queue:#5f656f; --st-ok:#1f7a4f; --st-fail:#b63b44; --st-warn:#8a5c14; --st-unknown:#6d5c10; --st-pub:#20707a; --st-int:#63479f; --plat-bili:#3d6fc0; --plat-douyin:#23917f; --plat-xhs:#c04b63; --plat-course:#8f7440; --plat-youtube:#a8663d; --plat-tiktok:#6f757f; --ev-follow:#c04b55; --at-story:#a86232; --at-case:#3a6cc0; --at-data:#268a59; --at-quote:#8f7440; --at-metaphor:#7254bd; --at-qa:#277e88; --seat-chatgpt:#5e6570; --seat-claude:#b06a28; --seat-gemini:#3a62c4; --seat-mimo:#b04a52; --shadow-1:0 1px 2px rgba(30,34,42,.10); --shadow-2:0 12px 30px rgba(30,34,42,.14); } /* ========================================================================== 基础 ========================================================================== */ /* IBM Plex 自托管(2026-07 从 npmmirror 的 @ibm/plex-sans@1.1.0 / @ibm/plex-mono@2.5.0 tgz 提取 complete/woff2,逐个 fontTools 开验无截断;jsdelivr 在本网络有截断前科勿用)。 文本用 swap:字体没到先出系统苹方,永不白屏;中文字形本来就走苹方。 */ @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap; src:url('/static/fonts/IBMPlexSans-Regular.woff2?v=1') format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap; src:url('/static/fonts/IBMPlexSans-Medium.woff2?v=1') format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap; src:url('/static/fonts/IBMPlexSans-SemiBold.woff2?v=1') format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap; src:url('/static/fonts/IBMPlexSans-Bold.woff2?v=1') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url('/static/fonts/IBMPlexMono-Regular.woff2?v=1') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url('/static/fonts/IBMPlexMono-Medium.woff2?v=1') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap; src:url('/static/fonts/IBMPlexMono-SemiBold.woff2?v=1') format('woff2')} /* Material Symbols 图标字体本地自托管(国内连 fonts.gstatic.com 拉不到,不能依赖 Google CDN, 否则图标全变成 ligature 文字名如 space_dashboard/bolt)。变量字体,含 opsz/wght/FILL/GRAD 轴。 */ @font-face{ font-family:'Material Symbols Outlined'; font-style:normal; font-weight:100 700; font-display:block; /* 图标不接受"先显示文字再换字体"的 FOUT,block 直接等字体 */ /* 子集字体:只含全站实际用到的 ~118 个图标连字,3.66MB→91KB。手机蜂窝网/Funnel 下秒加载, 不再因大字体加载慢而退化成 ligature 文字名。全量字体 material-symbols-outlined.woff2 仍留库中, 新增图标时用 scripts/subset_icons.py 重新生成子集。v 递增绕缓存。 */ src:url('/static/fonts/material-symbols-subset.woff2?v=11') format('woff2'); } *{box-sizing:border-box} html,body{margin:0} /* HTML hidden 属性必须压过组件类的 display(否则 .bs-syspanel/.bs-statuspill 的 display:flex 会盖掉 [hidden] 的 display:none,导致"今日运行摘要"浮窗、告警胶囊等一直显示关不掉)。 */ [hidden]{display:none !important} body{background:var(--canvas);color:var(--fg);font-family:var(--font-sans);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased} body,body *{transition:background-color .3s ease,border-color .3s ease,color .25s ease,fill .25s ease} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:5px} ::-webkit-scrollbar-track{background:transparent} a{color:var(--accent)} a:hover{filter:brightness(1.06)} button{transition:filter .15s ease,background-color .2s ease,border-color .2s ease;font-family:var(--font-sans)} button:hover{filter:brightness(1.08)} :focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 62%,transparent);outline-offset:2px} input:focus,input:focus-visible,textarea:focus,select:focus{outline:none} /* 数字/ID/时间戳一律等宽——石墨语言的灵魂;全站已打 .bs-num 的计数瞬间换装 */ .bs-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums} /* mono 大写分节小标(上下文面板/检查器分节用) */ .bs-seclabel{font:600 10.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-subtle)} .msym{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:19px;line-height:1;vertical-align:middle;-webkit-font-feature-settings:'liga';font-feature-settings:'liga'} @keyframes bs-pulse{0%,100%{box-shadow:0 0 0 0 rgba(69,192,138,.4)}70%{box-shadow:0 0 0 5px rgba(69,192,138,0)}} @keyframes bs-glow{0%,100%{filter:brightness(0) invert(1) drop-shadow(0 0 3px rgba(255,255,255,.55))}50%{filter:brightness(0) invert(1) drop-shadow(0 0 8px rgba(255,255,255,.95))}} @keyframes bs-spin{to{transform:rotate(360deg)}} :root[data-theme="light"] .bs-logo{filter:none !important;animation:none !important} /* ========================================================================== 组件类 ========================================================================== */ /* 按钮:主 / 次 / 幽灵。均为圆角矩形(非胶囊) */ .bs-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:8px 13px;border-radius:var(--r-btn); font:600 12.5px var(--font-sans);cursor:pointer;border:1px solid transparent;text-decoration:none} .bs-btn--primary{background:var(--accent);color:var(--accent-fg)} .bs-btn--primary:hover{background:var(--accent-hover)} .bs-btn--soft{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 28%,transparent)} .bs-btn--ghost{background:transparent;color:var(--fg-muted);border-color:var(--border-strong)} .bs-btn--icon{width:30px;height:30px;padding:0} /* 卡片 */ .bs-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-card)} /* 页容器:默认吃满主区宽度(用户明确不要两侧留白);只有阅读型页保留适度限宽 */ .bs-page{padding:18px 24px 40px;display:flex;flex-direction:column;gap:14px;width:100%} .bs-page--wide{} .bs-page--narrow{max-width:980px;margin:0 auto} .bs-page--full{} /* 统计磁贴网格:桌面 4 列,手机 2×2(否则 4 列在窄屏挤到标签折行"巡检成/功率")。 minmax(0,…) 防止内容撑破轨道。用于 ops 健康四格/积压磁贴等。 */ .bs-statgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} /* 断点按视口而主区被左侧两栏挤压:≤1100px 视口时主区已不足 4 列,提前降 2×2 */ @media (max-width:1100px){.bs-statgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} .bs-h2{margin:0 0 3px;font:600 20px var(--font-sans);letter-spacing:.2px;color:var(--fg)} .bs-sub{margin:0;font-size:13px;color:var(--fg-muted)} /* 百分位徽章(底色由后端 p_color() 预算) */ .bs-badge-p{display:inline-flex;align-items:center;gap:1px;padding:2px 7px;border-radius:var(--r-badge); font:600 12px var(--font-sans);font-variant-numeric:tabular-nums} .bs-badge-p--hit{box-shadow:0 0 0 1px var(--accent),0 0 9px color-mix(in srgb,var(--accent) 38%,transparent);font-weight:700} .bs-badge-p .msym{font-size:13px} /* 类型/标签胶囊(软底) */ .bs-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-btn);font:600 11.5px var(--font-sans)} .bs-chip .bs-dot{margin-left:0} /* 过滤 chip(radar/assets/ops tab 等) */ .bs-fchip{cursor:pointer;padding:4px 10px;border-radius:7px;font-size:12px;border:1px solid var(--border);background:transparent;color:var(--fg-muted);white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:4px;font-family:var(--font-sans)} .bs-fchip.is-active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)} .bs-tabbtn{padding:7px 13px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--fg-muted);cursor:pointer;font:600 13px var(--font-sans);text-decoration:none;display:inline-flex;align-items:center;gap:5px} .bs-tabbtn.is-active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)} /* 溯源角标 */ .bs-ref{font:600 9.5px var(--font-mono);color:var(--accent);background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:4px;padding:0 3px; margin:0 1px;vertical-align:2px;cursor:pointer;text-decoration:none} /* 表格 */ .bs-table{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden} .bs-thead{display:grid;gap:12px;padding:10px 16px;background:var(--surface-2);font-size:11px;color:var(--fg-subtle)} .bs-trow{display:grid;gap:12px;padding:11px 16px;border-top:1px solid var(--border);align-items:center} .bs-trow--compact{padding:6px 12px;font-size:12px} .bs-empty{padding:30px 16px;text-align:center;color:var(--fg-subtle);font-size:13px;border-top:1px solid var(--border)} .bs-empty--card{padding:32px;text-align:center;color:var(--fg-subtle);font-size:13px;background:var(--surface-1);border:1px dashed var(--border-strong);border-radius:10px} /* 圆形字符头像(无图兜底) */ .bs-av{border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font:600 11px var(--font-serif);overflow:hidden} .bs-av img{width:100%;height:100%;object-fit:cover;border-radius:50%} /* 输入 */ .bs-input{padding:9px 11px;background:var(--surface-3);border:1px solid var(--border);border-radius:8px;font:400 13px var(--font-sans);color:var(--fg);width:100%} .bs-input::placeholder{color:var(--fg-subtle)} select.bs-input{appearance:none;-webkit-appearance:none} .bs-searchbar{display:flex;align-items:center;gap:8px;padding:10px 13px;background:var(--surface-1);border:1px solid var(--border);border-radius:8px} .bs-searchbar input{flex:1;border:none;background:transparent;outline:none;color:var(--fg);font:400 13px var(--font-sans)} .bs-label{font-size:11px;color:var(--fg-subtle)} /* 状态点 */ .bs-dot{width:7px;height:7px;border-radius:50%;margin-left:auto;flex-shrink:0} .bs-dot--ok{background:var(--ok)} .bs-dot--warn{background:var(--warn)} .bs-dot--danger{background:var(--danger)} .bs-dot--pulse{animation:bs-pulse 1.8s infinite} /* ========================================================================== 状态语言:形状+颜色+文字三重编码(纯 CSS 形状,不占图标字体) ● 运行 ○ 排队/就绪 ✓ 成功 ✕ 失败 ▲ 需人工 ‖ 中断/暂停 ╱ 已取消 ◇ 失效 用法:运行中;宏 _badges.html st() 带归一化。 ========================================================================== */ .bs-st{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--font-sans);color:var(--st-c,var(--fg-muted));white-space:nowrap;line-height:1.3} .bs-st::before{content:'';flex:none;display:inline-block} .bs-st--run{--st-c:var(--st-run)} .bs-st--pub{--st-c:var(--st-pub)} .bs-st--run::before,.bs-st--pub::before{width:9px;height:9px;border-radius:50%;background:var(--st-c)} .bs-st--queue{--st-c:var(--st-queue)} .bs-st--unk{--st-c:var(--st-unknown)} .bs-st--queue::before,.bs-st--unk::before{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--st-c)} .bs-st--ok{--st-c:var(--st-ok)} .bs-st--ok::before{width:9px;height:5px;border-left:2px solid var(--st-c);border-bottom:2px solid var(--st-c);transform:rotate(-45deg);margin-top:-3px} .bs-st--fail{--st-c:var(--st-fail)} .bs-st--fail::before{width:10px;height:10px;background:var(--st-c);clip-path:polygon(18% 4%,4% 18%,36% 50%,4% 82%,18% 96%,50% 64%,82% 96%,96% 82%,64% 50%,96% 18%,82% 4%,50% 36%)} .bs-st--warn{--st-c:var(--st-warn)} .bs-st--warn::before{width:11px;height:10px;background:var(--st-c);clip-path:polygon(50% 0,100% 100%,0 100%)} .bs-st--int{--st-c:var(--st-int)} .bs-st--int::before{width:8px;height:10px;background:linear-gradient(90deg,var(--st-c) 0 3px,transparent 3px 5px,var(--st-c) 5px 8px)} .bs-st--cancel{--st-c:var(--st-queue)} .bs-st--cancel::before{width:2px;height:11px;background:var(--st-c);transform:rotate(45deg)} .bs-st--stale{--st-c:var(--fg-subtle)} .bs-st--stale::before{width:8px;height:8px;border:1.5px dashed var(--st-c);transform:rotate(45deg);margin-right:1px} .bs-st--pulse::before{animation:bs-stpulse 1.8s infinite} @keyframes bs-stpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--st-c) 42%,transparent)}70%{box-shadow:0 0 0 5px transparent}} /* 描边药丸变体(状态卡/图例用):同一形状语言 + 状态色描边 */ .bs-st--pill{border:1px solid color-mix(in srgb,var(--st-c) 55%,transparent);border-radius:var(--r-btn);padding:2px 8px;background:color-mix(in srgb,var(--st-c) 8%,transparent)} /* ========================================================================== 应用外壳布局在 shell.css(四栏:图标栏/上下文面板/主区/检查器);这里只留跨壳组件。 ========================================================================== */ .bs-logo{font-size:20px;filter:brightness(0) invert(1) drop-shadow(0 0 4px rgba(255,255,255,.8));animation:bs-glow 3s ease-in-out infinite} /* 话题详情抽屉:桌面右侧滑入 / 手机底部抽屉 */ .bs-drawer__scrim{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:30} .bs-drawer{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:90vw;background:var(--surface-1);border-left:1px solid var(--border);box-shadow:var(--shadow-2);z-index:31;padding:22px 24px;overflow:auto;display:flex;flex-direction:column;gap:15px} /* 生成中骨架 */ .bs-skel{height:11px;border-radius:5px;background:var(--surface-3)} /* toast(app.js 依赖) */ .toast-wrap{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:8px} .toast{background:var(--surface-2);border:1px solid var(--border-strong);color:var(--fg);border-radius:10px;padding:10px 14px;font-size:13px;box-shadow:var(--shadow-2);max-width:340px} .toast.ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent)} .toast.err{border-color:color-mix(in srgb,var(--danger) 55%,transparent)} /* 四席顾问列色(seat 1-4 = ChatGPT/Claude/Gemini/MIMO;按 slot 取色) */ .bs-seat{border-radius:var(--r-card);display:flex;flex-direction:column;overflow:hidden;min-width:0} .bs-seat--1{--seat:var(--seat-chatgpt)} .bs-seat--2{--seat:var(--seat-gemini)} .bs-seat--3{--seat:var(--seat-claude)} .bs-seat--4{--seat:var(--seat-mimo)} .bs-seat{background:color-mix(in srgb,var(--seat) 9%,var(--surface-1));border:1px solid color-mix(in srgb,var(--seat) 32%,var(--border))} .bs-seat__head{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid color-mix(in srgb,var(--seat) 32%,var(--border));background:color-mix(in srgb,var(--seat) 18%,transparent)} .bs-seat__icon{width:22px;height:22px;border-radius:6px;background:var(--seat);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .bs-seat__body{padding:14px;overflow:auto;display:flex;flex-direction:column;gap:10px;font-size:13.5px;line-height:1.78;min-width:0;overflow-wrap:anywhere;white-space:pre-wrap} /* 服务端 flash 横幅 */ .flash{padding:10px 14px;border-radius:10px;font-size:13px;border:1px solid var(--border)} .flash-ok{background:color-mix(in srgb,var(--ok) 10%,transparent);border-color:color-mix(in srgb,var(--ok) 35%,transparent);color:var(--fg)} .flash-err{background:color-mix(in srgb,var(--danger) 10%,transparent);border-color:color-mix(in srgb,var(--danger) 40%,transparent);color:var(--fg)} /* 异步按钮 loading 态(app.js 依赖) */ button.is-loading{opacity:.55;pointer-events:none;position:relative} button.is-loading::after{content:'';width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;margin-left:6px;animation:bs-spin .8s linear infinite;display:inline-block;vertical-align:-2px} /* 瀑布流 */ .bs-masonry{column-count:3;column-gap:12px} .bs-masonry>*{break-inside:avoid;margin-bottom:12px} /* ========================================================================== 响应式(壳的响应式在 shell.css;这里只管组件级:瀑布流降列 + 抽屉底部化) ========================================================================== */ @media (max-width:1000px){ .bs-masonry{column-count:2} } @media (max-width:768px){ .bs-masonry{column-count:1} /* z=40 压过底部 tabbar(z35),底部留出 tabbar+安全区,否则抽屉底部的主 CTA 被遮 */ .bs-drawer{top:auto;left:0;right:0;bottom:0;width:auto;max-width:none;max-height:82vh;border-left:none;border-top:1px solid var(--border);border-radius:16px 16px 0 0;z-index:40;padding-bottom:calc(env(safe-area-inset-bottom) + 76px)} .bs-drawer__scrim{z-index:39} }