/* ============ 主题变量: 深色为默认, 浅色经 prefers-color-scheme / [data-theme] 覆盖 ============ 语义色规约: 红=严重 黄=关注 绿=正常 灰=历史 蓝=交互。 文本档均按 WCAG AA(≥4.5:1)对各自主题底色校准; 终端画面(termlog)双主题保持深色。 面板垂直节奏: 所有顶层面板 margin-bottom 统一走 --gap-panel(桌面 14 / 移动 12)。 */ :root { --gap-panel: 14px; color-scheme: dark; --bg: #0a0a0a; --bg-elev: #141414; --bg-panel: #131313; --bg-deep: #101010; --bg-input: #141414; --bg-hover: #1f1f1f; --bg-active: #262626; --border: #222; --border-soft: #1f1f1f; --border-faint: #1a1a1a; --btn-bg: #262626; --btn-hover: #333; --btn-press: #3a3a3a; --btn-border: #333; --btn-soft-bg: #1d1d1d; --btn-soft-border: #2e2e2e; --btn-soft-hover-bd: #555; --chip-bg: #1c1c1e; --chip-border: #2a2a2a; --chip-on-bg: #f2f2f2; --chip-on-tx: #111; --text-title: #f2f2f2; --text-hi: #eee; --text: #d6d6d6; --text-mid: #c9c9c9; --text-soft: #b0b0b0; --text-dim: #909090; --text-faint: #8a8a8a; --text-ghost: #777; --text-dead: #666; --header-bg: rgba(10,10,10,.9); --tabbar-bg: rgba(12,12,12,.82); /* iOS Liquid Glass 材质: 悬浮胶囊/浮动按钮/玻璃圆钮共用 */ --glass-bg: rgba(28,28,30,.72); --glass-bd: rgba(255,255,255,.08); --glass-shadow: 0 10px 30px rgba(0,0,0,.36); --nav-pill: rgba(0,0,0,.42); --accent: #0a84ff; --scrim: rgba(0,0,0,.92); --skel: #1a1a1a; --focus: #4a90d9; --c-red: #e06c6c; --c-red-bg: #2a1a1a; --c-warn: #f0b662; --c-warn-bg: #2a2118; --c-warn-border: #5a4422; --c-green: #6ec89a; --c-green-bg: #14261c; --c-green-btn: #2e7d4f; --c-orange: #e0884c; --c-gray: #9a9a9a; --c-blue: #8ab4f8; --c-violet: #9d8cf5; --c-violet-soft: #6b5bd6; --link-blue: #6ea8dc; --dot-off: #555; --accent-blue-bg: #1d2733; --accent-blue-bd: #2c3a4d; --accent-blue-tx: #9db8d9; --accent-blue-hover: #243445; --detail-bg: #101418; --tbadge-wd-bg: #2a2010; --tbadge-wd-tx: #e0a84c; --tbadge-wd-bd: #4a3a18; --tbadge-rd-bg: #1e2832; --tbadge-rd-tx: #6ea8dc; --tbadge-rd-bd: #26405a; --tbadge-sc-bg: #1c1c1c; --tbadge-sc-tx: #9a9a9a; --tbadge-sc-bd: #2e2e2e; --term-bg: #0a0e12; --term-bd: #1c242e; --term-tx: #9fd4a0; --ts-dim: #5c7a9a; --evt-ts: #63849f; --ch-cpu: #6ea8dc; --ch-load: #6ec89a; --ch-mem: #e0a84c; --ch-swap: #b48ead; --ch-grid: #1c1c1c; } /* 浅色: 同一组变量(跟随系统且未被 [data-theme=dark] 覆盖时生效) */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #f2f2f7; --bg-elev: #fff; --bg-panel: #fafafa; --bg-deep: #ececec; --bg-input: #fff; --bg-hover: #e9e9e9; --bg-active: #e2e2e2; --border: #e0e0e0; --border-soft: #e4e4e4; --border-faint: #eaeaea; --btn-bg: #e4e4e4; --btn-hover: #d8d8d8; --btn-press: #d0d0d0; --btn-border: #c9c9c9; --btn-soft-bg: #fff; --btn-soft-border: #c9c9c9; --btn-soft-hover-bd: #999; --chip-bg: #fff; --chip-border: #cfcfcf; --chip-on-bg: #1f1f1f; --chip-on-tx: #fff; --text-title: #111; --text-hi: #1a1a1a; --text: #242424; --text-mid: #333; --text-soft: #464646; --text-dim: #575757; --text-faint: #666; --text-ghost: #757575; --text-dead: #8f8f8f; --header-bg: rgba(245,245,245,.92); --tabbar-bg: rgba(250,250,250,.86); --glass-bg: rgba(242,242,247,.72); --glass-bd: rgba(0,0,0,.06); --glass-shadow: 0 10px 30px rgba(0,0,0,.12); --nav-pill: rgba(118,118,128,.24); --accent: #0066cc; --scrim: rgba(0,0,0,.55); --skel: #e2e2e2; --focus: #2b6cb0; --c-red: #b33939; --c-red-bg: #fbeaea; --c-warn: #8a5800; --c-warn-bg: #fdf3dd; --c-warn-border: #e3c88f; --c-green: #1e7d4f; --c-green-bg: #e6f4ec; --c-green-btn: #1e7d4f; --c-orange: #a85413; --c-gray: #5f6368; --c-blue: #2b6cb0; --c-violet: #6c5ce7; --c-violet-soft: #5a4bd0; --link-blue: #2b6cb0; --dot-off: #b8b8b8; --accent-blue-bg: #e8f0fb; --accent-blue-bd: #c4d8f0; --accent-blue-tx: #3a6ea5; --accent-blue-hover: #d8e7fa; --detail-bg: #f0f5fa; --tbadge-wd-bg: #fdf3dd; --tbadge-wd-tx: #8a5800; --tbadge-wd-bd: #e6cf9e; --tbadge-rd-bg: #e8f0fb; --tbadge-rd-tx: #3a6ea5; --tbadge-rd-bd: #c4d8f0; --tbadge-sc-bg: #ececec; --tbadge-sc-tx: #5c5c5c; --tbadge-sc-bd: #d5d5d5; --ts-dim: #5a7a99; --evt-ts: #51708c; --ch-cpu: #3572b0; --ch-load: #1e7d4f; --ch-mem: #a8731a; --ch-swap: #8d6a9e; --ch-grid: #e4e4e4; } } /* 浅色手动覆盖(设置里选「浅色」) */ :root[data-theme="light"] { color-scheme: light; --bg: #f2f2f7; --bg-elev: #fff; --bg-panel: #fafafa; --bg-deep: #ececec; --bg-input: #fff; --bg-hover: #e9e9e9; --bg-active: #e2e2e2; --border: #e0e0e0; --border-soft: #e4e4e4; --border-faint: #eaeaea; --btn-bg: #e4e4e4; --btn-hover: #d8d8d8; --btn-press: #d0d0d0; --btn-border: #c9c9c9; --btn-soft-bg: #fff; --btn-soft-border: #c9c9c9; --btn-soft-hover-bd: #999; --chip-bg: #fff; --chip-border: #cfcfcf; --chip-on-bg: #1f1f1f; --chip-on-tx: #fff; --text-title: #111; --text-hi: #1a1a1a; --text: #242424; --text-mid: #333; --text-soft: #464646; --text-dim: #575757; --text-faint: #666; --text-ghost: #757575; --text-dead: #8f8f8f; --header-bg: rgba(245,245,245,.92); --tabbar-bg: rgba(250,250,250,.86); --glass-bg: rgba(242,242,247,.72); --glass-bd: rgba(0,0,0,.06); --glass-shadow: 0 10px 30px rgba(0,0,0,.12); --nav-pill: rgba(118,118,128,.24); --accent: #0066cc; --scrim: rgba(0,0,0,.55); --skel: #e2e2e2; --focus: #2b6cb0; --c-red: #b33939; --c-red-bg: #fbeaea; --c-warn: #8a5800; --c-warn-bg: #fdf3dd; --c-warn-border: #e3c88f; --c-green: #1e7d4f; --c-green-bg: #e6f4ec; --c-green-btn: #1e7d4f; --c-orange: #a85413; --c-gray: #5f6368; --c-blue: #2b6cb0; --c-violet: #6c5ce7; --c-violet-soft: #5a4bd0; --link-blue: #2b6cb0; --dot-off: #b8b8b8; --accent-blue-bg: #e8f0fb; --accent-blue-bd: #c4d8f0; --accent-blue-tx: #3a6ea5; --accent-blue-hover: #d8e7fa; --detail-bg: #f0f5fa; --tbadge-wd-bg: #fdf3dd; --tbadge-wd-tx: #8a5800; --tbadge-wd-bd: #e6cf9e; --tbadge-rd-bg: #e8f0fb; --tbadge-rd-tx: #3a6ea5; --tbadge-rd-bd: #c4d8f0; --tbadge-sc-bg: #ececec; --tbadge-sc-tx: #5c5c5c; --tbadge-sc-bd: #d5d5d5; --ts-dim: #5a7a99; --evt-ts: #51708c; --ch-cpu: #3572b0; --ch-load: #1e7d4f; --ch-mem: #a8731a; --ch-swap: #8d6a9e; --ch-grid: #e4e4e4; } /* 深色手动覆盖(系统浅色时选「深色」) */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0a0a0a; --bg-elev: #141414; --bg-panel: #131313; --bg-deep: #101010; --bg-input: #141414; --bg-hover: #1f1f1f; --bg-active: #262626; --border: #222; --border-soft: #1f1f1f; --border-faint: #1a1a1a; --btn-bg: #262626; --btn-hover: #333; --btn-press: #3a3a3a; --btn-border: #333; --btn-soft-bg: #1d1d1d; --btn-soft-border: #2e2e2e; --btn-soft-hover-bd: #555; --chip-bg: #1c1c1e; --chip-border: #2a2a2a; --chip-on-bg: #f2f2f2; --chip-on-tx: #111; --text-title: #f2f2f2; --text-hi: #eee; --text: #d6d6d6; --text-mid: #c9c9c9; --text-soft: #b0b0b0; --text-dim: #909090; --text-faint: #8a8a8a; --text-ghost: #777; --text-dead: #666; --header-bg: rgba(10,10,10,.9); --tabbar-bg: rgba(12,12,12,.82); --glass-bg: rgba(28,28,30,.72); --glass-bd: rgba(255,255,255,.08); --glass-shadow: 0 10px 30px rgba(0,0,0,.36); --nav-pill: rgba(0,0,0,.42); --accent: #0a84ff; --scrim: rgba(0,0,0,.92); --skel: #1a1a1a; --focus: #4a90d9; --c-red: #e06c6c; --c-red-bg: #2a1a1a; --c-warn: #f0b662; --c-warn-bg: #2a2118; --c-warn-border: #5a4422; --c-green: #6ec89a; --c-green-bg: #14261c; --c-green-btn: #2e7d4f; --c-orange: #e0884c; --c-gray: #9a9a9a; --c-blue: #8ab4f8; --c-violet: #9d8cf5; --c-violet-soft: #6b5bd6; --link-blue: #6ea8dc; --dot-off: #555; --accent-blue-bg: #1d2733; --accent-blue-bd: #2c3a4d; --accent-blue-tx: #9db8d9; --accent-blue-hover: #243445; --detail-bg: #101418; --tbadge-wd-bg: #2a2010; --tbadge-wd-tx: #e0a84c; --tbadge-wd-bd: #4a3a18; --tbadge-rd-bg: #1e2832; --tbadge-rd-tx: #6ea8dc; --tbadge-rd-bd: #26405a; --tbadge-sc-bg: #1c1c1c; --tbadge-sc-tx: #9a9a9a; --tbadge-sc-bd: #2e2e2e; --term-bg: #0a0e12; --term-bd: #1c242e; --term-tx: #9fd4a0; --ts-dim: #5c7a9a; --evt-ts: #63849f; --ch-cpu: #6ea8dc; --ch-load: #6ec89a; --ch-mem: #e0a84c; --ch-swap: #b48ead; --ch-grid: #1c1c1c; } * { box-sizing: border-box; } body { margin: 0; font-family: ui-sans-serif, system-ui, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); } header { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: none; padding: 14px 24px 6px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } header h1 { font-size: 22px; margin: 0; font-weight: 800; letter-spacing: -.3px; color: var(--text-title); display: inline-flex; align-items: baseline; gap: 8px; } header h1 .h-home-link { color: inherit; text-decoration: none; display: inline-flex; align-items: baseline; gap: 8px; } header h1 .h-home-link:hover .h-brand { color: var(--c-orange); } header h1 .h-logo { align-self: center; color: var(--c-orange); display: inline-flex; flex: none; } header h1 .h-brand { font-size: 22px; } header h1 .h-sep { color: var(--text-faint); font-weight: 400; } header h1 .h-host { font-size: 15px; font-weight: 500; color: var(--text-mid); display: inline-flex; align-items: baseline; gap: 6px; } header h1 .h-server { width: 7px; height: 7px; border-radius: 50%; background: var(--c-green); flex: none; align-self: center; } /* 顶栏连接 chip: ssh/LAN IP 点击复制(折叠自原首页独立面板, 零新增纵向空间) */ .h-conn { display: inline-flex; align-items: center; gap: 6px; } .h-conn .gcopy { font-family: ui-monospace, monospace; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-faint); color: var(--text-faint); cursor: pointer; user-select: none; transition: color .12s, border-color .12s; } .h-conn .gcopy b { font-weight: 500; } .h-conn .gcopy:hover { color: var(--text-hi); border-color: var(--text-faint); } header .meta { color: var(--text-soft); font-size: 12.5px; } header .spacer { flex: 1; } .lang-switch { position: relative; z-index: 50; flex: none; } .lang-trigger { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 11px; border: 1px solid var(--chip-border); border-radius: 999px; background: var(--chip-bg); color: var(--text-mid); font: 600 11px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .035em; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .lang-trigger:hover, .lang-trigger[aria-expanded="true"] { background: var(--bg-hover); border-color: var(--border); color: var(--text-title); } .lang-globe { color: var(--accent); } .lang-chevron { opacity: .65; transition: transform .15s; } .lang-trigger[aria-expanded="true"] .lang-chevron { transform: rotate(180deg); } .lang-menu { position: absolute; top: calc(100% + 9px); right: 0; width: 238px; padding: 7px; border: 1px solid var(--glass-bd); border-radius: 17px; background: var(--glass-bg); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); } .lang-menu[hidden] { display: none; } .lang-menu-title { padding: 8px 10px 7px; color: var(--text-ghost); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .lang-option { display: flex; align-items: center; width: 100%; gap: 10px; padding: 9px 10px; border: 0; border-radius: 11px; background: transparent; color: var(--text); text-align: left; font: 500 12.5px/1.35 ui-sans-serif, system-ui, sans-serif; cursor: pointer; } .lang-option:hover, .lang-option[aria-checked="true"] { background: var(--bg-hover); color: var(--text-title); } .lang-option-main { flex: 1; } .lang-option-detail { color: var(--text-ghost); font: 500 10px/1 ui-sans-serif, system-ui, sans-serif; } .lang-check { width: 14px; color: var(--accent); opacity: 0; font-size: 12px; text-align: center; } .lang-option[aria-checked="true"] .lang-check { opacity: 1; } /* ---------------- 自绘控件体系 ---------------- 不使用任何系统原生控件: 所有按钮/开关均为自绘元素。 span[role=button] 语义: 可点击;键盘 Enter/Space 由全局委托触发 click。 */ .btn, .chip, .tcol, .ctl-btn, .svctl-btn, .mbtn, .aglog-refresh { display: inline-flex; align-items: center; justify-content: center; gap: 6px; user-select: none; -webkit-user-select: none; touch-action: manipulation; cursor: pointer; transition: background .12s, border-color .12s, color .12s, transform .05s; } .btn { background: var(--btn-bg); color: var(--text-hi); border: 1px solid var(--btn-border); border-radius: 16px; padding: 7px 14px; font-size: 13px; } .btn:hover { background: var(--btn-hover); } .btn:active { background: var(--btn-press); transform: translateY(1px); } .btn.spinning { opacity: .7; } /* topbar 刷新按钮(玻璃圆钮): 点击=立即刷新, 长按=锁定/解锁自动刷新(锁定=琥珀描边+锁形角标) */ .icon-btn { width: 40px; height: 40px; min-height: 40px; padding: 0; position: relative; border-radius: 50%; background: var(--glass-bg); border: 1px solid var(--glass-bd); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); } #refresh.locked { border-color: var(--c-warn); color: var(--c-warn); } #refresh .ic-badge { position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; border-radius: 50%; background: var(--c-warn); color: var(--bg); display: none; align-items: center; justify-content: center; } #refresh.locked .ic-badge { display: inline-flex; } /* 移动端下拉刷新指示器: 原生 App 悬浮环形 (38px), 毛玻璃材质 + 圆环进度与加载旋转 */ #ptr-indicator { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; z-index: 100; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--glass-bg); border: 1px solid var(--glass-bd); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); border-radius: 50%; color: var(--accent); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32); opacity: 0; pointer-events: none; transform: translate3d(-50%, -46px, 0) scale(0.72); transition: transform 0.28s cubic-bezier(0.2, 0, 0, 1), opacity 0.2s ease, box-shadow 0.2s ease; will-change: transform, opacity; } #ptr-indicator.on { opacity: 1; } #ptr-indicator.pulling { transition: none; } #ptr-indicator.ready { box-shadow: 0 6px 22px rgba(97, 175, 239, 0.38); } #ptr-indicator.loading { opacity: 1; } #ptr-indicator .ptr-core { display: inline-flex; align-items: center; justify-content: center; will-change: transform; color: var(--accent); transition: transform 0.08s linear; } #ptr-indicator.loading .ptr-core { animation: ptr-spin 0.75s linear infinite; color: #10b981; } #ptr-indicator svg.ptr-ring { position: absolute; inset: -1px; transform: rotate(-90deg); width: 38px; height: 38px; pointer-events: none; } #ptr-indicator .ptr-ring circle { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 103.7; stroke-dashoffset: 103.7; transition: stroke-dashoffset 0.06s linear, stroke-width 0.15s ease, stroke 0.2s ease; } #ptr-indicator.ready .ptr-ring circle { stroke-width: 3; stroke: var(--accent); } #ptr-indicator.loading .ptr-ring circle { stroke: #10b981; } @keyframes ptr-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #ptr-indicator { transition: none !important; } #ptr-indicator.loading .ptr-core { animation: none !important; } } /* 全局移除右下角悬浮刷新按钮: 完全通过下拉手势与顶栏按钮刷新 */ .fab-refresh { display: none !important; } .btn[aria-disabled="true"], .btn.disabled { opacity: .5; cursor: default; pointer-events: none; } .btn:focus-visible, .chip:focus-visible, .tcol:focus-visible, .ctl-btn:focus-visible, .svctl-btn:focus-visible, .mbtn:focus-visible, .aglog-refresh:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* ---------------- 内联 SVG 图标对齐体系(emoji 全量替换) ---------------- */ .ic { display: inline-block; vertical-align: -0.15em; line-height: 1; } .lb-ico, .glight, .al-ico, .rc-ico, .lv-ico, .evt-ico { display: inline-flex; align-items: center; flex: none; } .lb-ico { color: var(--text-dim); margin-right: 5px; } .t-green { color: var(--c-green); } .t-warn { color: var(--c-warn); } .t-red { color: var(--c-red); } .t-orange { color: var(--c-orange); } main { padding: 16px 24px 40px; } /* ---------------- 移动 App 化基础(桌面端多数隐藏) ---------------- 字号走 rem(html=100%),尊重系统字体大小设置; 手势元素(页签栏/图表)仅手机布局出现; 日志/agent/骨架屏双端共用。 */ [hidden] { display: none !important; } /* 防 class 的 display:flex 盖过 hidden 属性 */ html { font-size: 100%; -webkit-text-size-adjust: 100%; } #pages { display: contents; } /* 桌面: 透明容器,子元素即 main 内容 */ #tabbar, .gmore { display: none; } /* 日志/agent/骨架/时间线桌面可达; 分类过滤走 .cat-off */ .gextra { display: block; } /* 服务卡头行显式圆形操作钮: 复制地址 + 打开(替代旧左滑手势) */ .svc-act { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; flex: none; cursor: pointer; background: var(--btn-soft-bg); border: 1px solid var(--btn-soft-border); color: var(--text-mid); } .svc-act:active { transform: scale(.92); } .svc-open { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--accent-blue-bg); border: 1px solid var(--accent-blue-bd); color: var(--accent-blue-tx); text-decoration: none; } .skel-line { height: 14px; border-radius: 6px; margin: 10px 0; background: var(--skel); animation: skel-pulse 1.1s ease-in-out infinite; } @keyframes skel-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } /* 桌面日志页: agent 选择器收窄左置, 事件时间线全宽(桌面=横向空间原则) */ #logpage .ui-select { max-width: 460px; } #logpage .agentlog { max-height: 65vh; } .logbar select { width: 100%; background: var(--chip-bg); color: var(--text); border: none; border-radius: 999px; padding: 10px 16px; font-size: 13px; min-height: 44px; } #chart-wrap canvas { width: 100%; height: 150px; display: block; touch-action: none; } #chart-empty { color: var(--text-dead); font-size: 12px; padding: 18px 0; } .gmore { display: none; color: var(--text-dim); font-size: 11px; } .sysbar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: var(--gap-panel); } .stat { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 10px 16px; min-width: 130px; } .stat .label { color: var(--text-dim); font-size: 11px; margin-bottom: 3px; display: inline-flex; align-items: center; } .stat .value { font-size: 14px; font-weight: 600; font-family: ui-monospace, monospace; color: var(--text-hi); white-space: nowrap; } .stat .value.bad { color: var(--c-red); } /* P1-2: 指标值 >90 红 */ .stat .value.warn { color: var(--c-warn); } /* P1-2: 指标值 ≥75 黄 */ .tbadge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; margin-right: 6px; vertical-align: 1px; } .tbadge.wd { background: var(--tbadge-wd-bg); color: var(--tbadge-wd-tx); border: 1px solid var(--tbadge-wd-bd); } .tbadge.rd { background: var(--tbadge-rd-bg); color: var(--tbadge-rd-tx); border: 1px solid var(--tbadge-rd-bd); } .tbadge.sc { background: var(--tbadge-sc-bg); color: var(--tbadge-sc-tx); border: 1px solid var(--tbadge-sc-bd); } .filters { display: flex; gap: 8px; margin-bottom: var(--gap-panel); flex-wrap: wrap; align-items: center; } /* 日志页: logbar → chips → 列表 垂直节奏(此前 chips 紧贴选择器) */ #logpage .logbar { margin-bottom: 14px; } #logpage .filters { margin-top: 2px; } #logpage #logbody { margin-top: 4px; } .aglog-list { gap: 0; } /* 行距改由行内 padding 控制, 分隔线代替空隙 */ .filters .spacer { flex: 1; } .watchdog-panel { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: var(--gap-panel); } .watchdog-panel h2 { margin: 0 0 8px; font-size: 13px; color: var(--text-dim); font-weight: 500; } .watchdog-panel table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .watchdog-panel th { text-align: left; color: var(--text-ghost); font-weight: 400; font-size: 11.5px; padding: 4px 8px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; } .watchdog-panel td { padding: 5px 8px; border-bottom: 1px solid var(--border-faint); vertical-align: top; } .watchdog-panel tr:last-child td { border-bottom: none; } .watchdog-panel .tname { font-family: ui-monospace, monospace; color: var(--text-hi); word-break: break-all; } .watchdog-panel .tsch { color: var(--text-soft); white-space: nowrap; } .watchdog-panel .tscope { color: var(--text-faint); font-size: 11px; } .watchdog-panel .tcmd { color: var(--text-dim); font-family: ui-monospace, monospace; font-size: 11px; word-break: break-all; max-width: 420px; } .watchdog-panel .tlink { cursor: pointer; } .watchdog-panel .tlink:hover { color: var(--c-blue); text-decoration: underline; } .watchdog-panel .agent-detail td { background: var(--detail-bg); padding: 10px 14px; } .agentlog { max-height: 380px; overflow-y: auto; } .aglog-title { font-size: 12px; color: var(--text-faint); margin: 6px 0 4px; display: flex; align-items: center; gap: 8px; } .aglog-refresh { background: var(--accent-blue-bg); border: 1px solid var(--accent-blue-bd); color: var(--accent-blue-tx); padding: 2px 10px; font-size: 11px; border-radius: 14px; cursor: pointer; } .aglog-refresh:hover { background: var(--accent-blue-hover); } .aglog-list { display: flex; flex-direction: column; gap: 2px; } .aglog-row { display: flex; gap: 10px; font-family: ui-monospace, monospace; font-size: 11.5px; line-height: 1.5; padding: 7px 2px; border-bottom: 1px solid var(--border-faint); } .aglog-row:last-child { border-bottom: none; } .aglog-ts { color: var(--ts-dim); white-space: nowrap; flex: none; } .aglog-txt { color: var(--text-mid); word-break: break-all; } .termlog { background: var(--term-bg); border: 1px solid var(--term-bd); border-radius: 6px; padding: 8px 10px; font-family: ui-monospace, monospace; font-size: 11px; line-height: 1.45; color: var(--term-tx); overflow-x: auto; white-space: pre; margin: 2px 0 8px; } .aglog-empty { color: var(--text-dead); font-size: 12px; padding: 8px 0; } .mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; padding: 4px 0 12px; } .mcard { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; } .mcard .mhead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .mcard .mname { font-weight: 600; color: var(--text-hi); font-size: 14px; } .mcard .mdesc { color: var(--text-ghost); font-size: 11px; } .mcard .mstate { margin: 8px 0 10px; font-size: 12.5px; color: var(--text-soft); display: flex; align-items: center; gap: 6px; } .mcard .mdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .mcard .mbtns { display: flex; gap: 8px; flex-wrap: wrap; } .mcard .mbtn { background: var(--btn-soft-bg); border: 1px solid var(--btn-soft-border); color: var(--text); border-radius: 14px; padding: 5px 14px; font-size: 12.5px; cursor: pointer; } .mcard .mbtn:hover { border-color: var(--btn-soft-hover-bd); color: var(--text-title); } .mcard .mbtn[aria-disabled="true"] { opacity: .5; cursor: default; } .mcard .mresult { margin-top: 8px; font-size: 12px; color: var(--c-green); min-height: 15px; word-break: break-all; } .chip { background: var(--chip-bg); color: var(--text-soft); border: 1px solid transparent; border-radius: 999px; padding: 5px 14px; font-size: 12.5px; cursor: pointer; } .chip:hover { background: var(--bg-hover); } .chip.active { background: var(--chip-on-bg); border-color: var(--chip-on-bg); color: var(--chip-on-tx); } .chip span { opacity: .6; margin-left: 4px; font-size: 11px; } a.chip { text-decoration: none; } a.chip:hover { color: var(--text-title); border-color: var(--btn-hover); } .toolchips { margin-bottom: var(--gap-panel); } /* ---------------- Goal 进度卡片 / 负载水位 / 事件时间线 ---------------- */ .gpanel { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; margin-bottom: var(--gap-panel); } .gpanel h2 { margin: 0 0 10px; font-size: 13px; color: var(--text-dim); font-weight: 500; } .gpanel .ghint { color: var(--text-faint); font-weight: 400; font-size: 11.5px; } .gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 10px; align-items: stretch; } .gcard { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .tmux-goals-title { margin: 18px 0 8px; color: var(--text-dim); font-size: 12px; font-weight: 500; } .tmux-goals-meta { color: var(--text-faint); font-size: 11px; margin-bottom: 8px; } .tmux-session-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; padding: 9px 10px; margin-bottom: 8px; } .tmux-session-head, .tmux-pane-head { display: flex; align-items: baseline; gap: 7px; color: var(--text-soft); font-size: 11px; } .tmux-session-head b, .tmux-pane-head b { color: var(--text-hi); font-size: 12px; } .tmux-session-head span { margin-left: auto; color: var(--text-faint); } .tmux-pane-summary { border-top: 1px solid var(--border); margin-top: 7px; padding-top: 7px; } .tmux-pane-cwd { margin-left: auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-faint); } .tmux-live { color: var(--ok, #7ecb91); } .tmux-pane-summary pre { margin: 5px 0 0; padding: 7px 8px; max-height: 150px; overflow: auto; white-space: pre-wrap; word-break: break-word; background: var(--bg-deep); border-radius: 7px; color: var(--text-soft); font: 10.5px/1.45 var(--font-mono, monospace); } .gcard .ghead { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; } .gcard .glight { font-size: 13px; } .gcard .gname { font-weight: 600; color: var(--text-hi); font-size: 14px; word-break: break-all; } .gcard .gstate { color: var(--text-faint); font-size: 11.5px; } .g-detail-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex: none; cursor: pointer; color: var(--c-blue); font-size: 11.5px; user-select: none; } .g-detail-btn:hover, .g-detail-btn:focus-visible { text-decoration: underline; } /* 详情弹层: 宽弹层(≤1280px)下 KV 双栏 + 全宽彩色终端; 移动端单栏(见 768 媒体块) */ .ui-modal.detail-wide .ui-dialog { width: min(1280px, calc(100vw - 64px)); } .g-detail-body { max-height: min(78vh, 760px); overflow-y: auto; font-size: 12px; } .g-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; } .g-detail-section { margin: 0 0 14px; min-width: 0; } .g-detail-section h3 { margin: 0 0 6px; color: var(--text-dim); font-size: 12px; font-weight: 600; } .g-detail-kv { display: grid; grid-template-columns: 84px 1fr; gap: 5px 10px; } .g-detail-kv .k { color: var(--text-ghost); } .g-detail-kv .v { color: var(--text-main); word-break: break-word; font-family: ui-monospace, monospace; } .g-detail-log { white-space: pre; background: var(--term-bg); color: var(--term-tx); border: 1px solid var(--term-bd); border-radius: 8px; padding: 12px 14px; max-height: min(44vh, 430px); overflow: auto; font: 12px/1.5 ui-monospace, monospace; } .g-detail-events { display: grid; gap: 4px; } .g-detail-event { padding: 5px 7px; border-left: 2px solid var(--border); color: var(--text-main); } .g-detail-event .time { color: var(--text-ghost); margin-right: 7px; } .g-detail-event .kind { color: var(--accent); margin-right: 5px; } .gcard .gsub { color: var(--text-dim); font-size: 11.5px; margin-top: 2px; word-break: break-all; line-height: 1.45; } .gcard .grow { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--text-soft); padding: 3px 0 0; } /* 桌面首页网格: Web磁贴(左 2fr) / Goal摘要(右 1fr); 最近活动/仓库在下方全宽 */ .hp-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: var(--gap-panel); } .hp-grid .gpanel { margin-bottom: 0; } .hp-grid #recent { grid-column: 1 / -1; } /* 磁贴最小宽 200px, 放不下自动换行(auto-fill) */ .hp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .hp-tile { display: flex; flex-direction: column; align-items: stretch; gap: 3px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; text-decoration: none; color: var(--text-hi); font-weight: 600; font-size: 13px; } .hp-tile:hover { border-color: var(--btn-hover); background: var(--bg-hover); } .hp-tile-main { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; } .hp-tile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hp-tile-sub { font-size: 10.5px; font-weight: 400; color: var(--text-faint); font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hp-tile-port { color: var(--text-faint); font-weight: 400; font-size: 11px; font-family: ui-monospace, monospace; flex: none; } .hp-tile-main-r { display: inline-flex; align-items: center; gap: 5px; flex: none; } .hp-tile.sv-paused { opacity: .6; border-style: dashed; } .hp-tile-res { font-size: 10.5px; font-family: ui-monospace, monospace; color: var(--text-faint); } .hp-tile-res.hot { color: var(--c-orange); } .hp-tile-res.crit { color: var(--c-red); font-weight: 700; } /* 磁贴内迷你 暂停/恢复: 小方块图标钮(嵌在 内, 点击由委托拦截) */ .svctl-btn.hp-sv { width: 24px; height: 24px; min-height: 0; padding: 0; gap: 0; border-radius: 7px; background: transparent; color: var(--text-faint); display: inline-flex; align-items: center; justify-content: center; } .svctl-btn.hp-sv:hover { background: var(--btn-hover); color: var(--text-hi); border-color: var(--btn-hover); } .svctl-btn.hp-sv.paused { color: var(--c-warn); border-color: var(--c-warn-border); background: var(--c-warn-bg); } .hp-goal-line { font-size: 13px; color: var(--text-main); margin-bottom: 8px; } .hp-goal-row { display: flex; align-items: baseline; gap: 7px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px solid var(--border-faint); } .hp-goal-row:last-child { border-bottom: none; } .hp-goal-name { color: var(--text-hi); font-weight: 600; word-break: break-all; } .hp-goal-ctx { color: var(--text-faint); font-family: ui-monospace, monospace; font-size: 11px; } .hp-goal-ago { margin-left: auto; color: var(--text-ghost); font-size: 11px; flex: none; } @media (max-width: 1100px) { .hp-grid { grid-template-columns: 1fr 1fr; } .hp-grid #recent { grid-column: 1 / -1; } } .gcard .grow + .grow { border-top: none; } .gcard .grow > span:first-child { color: var(--text-ghost); flex: none; } .gcard .gtx { font-family: ui-monospace, monospace; color: var(--text-mid); } .gcard .gtx.warn { color: var(--c-warn); font-weight: 600; } .gcard .gtx.stop { color: var(--c-red); font-weight: 600; } .gcard .gretry { color: var(--c-orange); font-family: ui-monospace, monospace; } .gcard .gidle { font-family: ui-monospace, monospace; } .gcard .gstalled, .gcard .gstalled + * { color: var(--text-ghost) !important; } .gcard .gprog { font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--text-dim); line-height: 1.55; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gcard .gfoot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .gfoot-none { color: var(--text-dead); font-size: 12px; } .gcopy { display: inline-flex; align-items: center; gap: 6px; background: var(--btn-soft-bg); border: 1px solid var(--btn-soft-border); color: var(--text); border-radius: 14px; padding: 6px 14px; font-size: 12.5px; cursor: pointer; user-select: none; } .gcopy:hover { border-color: var(--btn-soft-hover-bd); color: var(--text-title); } /* ---- 按钮两级收敛: primary=描边胶囊(.btn/.tl-run/.ctl-btn) ghost=文字链 ---- */ .ghost, .g-ignore-btn { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--c-blue); font-size: 12px; cursor: pointer; user-select: none; white-space: nowrap; } .ghost:hover, .g-ignore-btn:hover { text-decoration: underline; } .g-ignore-btn.ignored { color: var(--text-dim); text-decoration: none; cursor: default; } .ghint.hp-more, .ghint.rc-more { color: var(--c-blue); cursor: pointer; } .ghint.hp-more:hover, .ghint.rc-more:hover { text-decoration: underline; } .gempty { color: var(--text-faint); font-size: 12.5px; padding: 10px 0; } .gdone { margin-top: 12px; border-top: 1px solid var(--border-soft); padding-top: 8px; } .gdone summary { cursor: pointer; color: var(--text-dim); font-size: 12.5px; user-select: none; display: flex; align-items: center; gap: 6px; } .gdone summary:hover { color: var(--text); } .gdone-row { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; font-size: 12px; border-bottom: 1px solid var(--border-faint); flex-wrap: wrap; } .gdone-row:last-child { border-bottom: none; } .gdone-name { color: var(--text-mid); font-weight: 600; word-break: break-all; } /* 仓库面板: agent/goal 改动过的仓库(名称/分支/统计/最近提交/文件占比) */ .rp-refresh { margin-left: auto; color: var(--text-dim); cursor: pointer; display: inline-flex; padding: 4px; border-radius: 8px; flex: none; } .rp-refresh:hover { color: var(--accent); background: var(--bg-hover); } .rp-refresh.spin svg { animation: rp-spin .9s linear infinite; } @keyframes rp-spin { to { transform: rotate(360deg); } } .rp-row { padding: 10px 0; border-bottom: 1px solid var(--border-faint); cursor: pointer; border-radius: 8px; transition: background .12s; } .rp-row:hover { background: var(--bg-hover); } .rp-row:last-child { border-bottom: none; } .rp-l1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13.5px; } .rp-name { color: var(--text-hi); font-weight: 600; word-break: break-all; } .rp-branch { color: var(--accent); font-family: ui-monospace, monospace; font-size: 11.5px; } .rp-meta { color: var(--text-dim); font-size: 11.5px; font-family: ui-monospace, monospace; } .rp-dirty { color: var(--c-warn); } .rp-last { margin-top: 4px; font-size: 12px; color: var(--text-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Agent 操作轨迹条: 近14天逐日双行色块 —— 每日一个 .tr-day(上下两根 i): 上行=里程碑(完成/提交/干预/恢复), 下行=活动健康(工具调用紫/失败高发红)。 ⚠ 优先级: 基础规则 .rp-traj .tr-day i = 0,2,1, 颜色规则必须用 .rp-traj .tr-day i.tr-xxx = 0,3,0 覆盖(背景+opacity 一并写, 踩过两次)。 */ .rp-traj { display: flex; gap: 3px; margin-top: 7px; } .rp-traj .tr-day { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .rp-traj .tr-day i { flex: none; min-width: 0; height: 4.5px; border-radius: 2px; background: var(--border-faint); opacity: .55; } .rp-traj .tr-day i.tr-commit, .traj-strip .tr-day i.tr-commit, .traj-legend i.tr-commit { background: var(--c-blue); opacity: 1; } .rp-traj .tr-day i.tr-warn, .traj-strip .tr-day i.tr-warn, .traj-legend i.tr-warn { background: var(--c-warn); opacity: 1; } .rp-traj .tr-day i.tr-good, .traj-strip .tr-day i.tr-good, .traj-legend i.tr-good { background: var(--c-green); opacity: 1; } .rp-traj .tr-day i.tr-done, .traj-strip .tr-day i.tr-done, .traj-legend i.tr-done { background: var(--c-green-btn); opacity: 1; } .rp-traj .tr-day i.tr-agent, .traj-strip .tr-day i.tr-agent, .traj-legend i.tr-agent { background: var(--c-violet); opacity: 1; } .rp-traj .tr-day i.tr-error, .traj-strip .tr-day i.tr-error, .traj-legend i.tr-error { background: var(--c-red); opacity: 1; } .tr-ev-error .traj-ev-ico { color: var(--c-red); } /* 轨迹详情浮层 */ .traj-sheet { position: fixed; inset: 0; z-index: 70; background: var(--bg); display: flex; flex-direction: column; } html.traj-noscroll, html.traj-noscroll body { overflow: hidden; } .traj-top { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 12px 6px; } .traj-iconbtn { width: 38px; height: 38px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--btn-soft-bg); border: 1px solid var(--btn-soft-border); color: var(--text-mid); cursor: pointer; } .traj-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .traj-name { font-size: 15px; font-weight: 600; color: var(--text-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .traj-sub { font-size: 11px; color: var(--text-faint); font-family: ui-monospace, monospace; } .traj-stripwrap { padding: 14px 16px 2px; } .traj-strip { display: flex; gap: 4px; height: 30px; } .traj-strip .tr-day { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .traj-strip .tr-day i { flex: 1 1 0; min-width: 0; border-radius: 4px; background: var(--border-faint); opacity: .5; } .traj-days { display: flex; gap: 4px; margin-top: 4px; } .traj-days b { flex: 1 1 0; text-align: center; font-size: 9.5px; font-weight: 400; color: var(--text-ghost); white-space: nowrap; overflow: hidden; } .traj-legend { display: flex; gap: 14px; padding: 10px 16px; font-size: 11px; color: var(--text-dim); flex-wrap: wrap; } .traj-legend span { display: inline-flex; align-items: center; gap: 5px; } .traj-legend i { width: 9px; height: 9px; border-radius: 2.5px; display: inline-block; background: var(--border-faint); } /* 类别筛选 chips: 点击只看该类事件, 再点取消 */ .traj-filter { display: flex; gap: 6px; padding: 4px 16px 10px; flex-wrap: wrap; border-bottom: 1px solid var(--border-faint); } .trf-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--chip-border); background: var(--chip-bg); color: var(--text-dim); cursor: pointer; user-select: none; } .trf-chip b { font-weight: 600; color: var(--text-mid); font-variant-numeric: tabular-nums; } .trf-chip.on { border-color: var(--c-blue); color: var(--c-blue); background: var(--accent-blue-bg); } .trf-chip.on b { color: var(--c-blue); } .traj-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px calc(24px + env(safe-area-inset-bottom)); } .traj-ev { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border-faint); font-size: 12.5px; } .traj-ev-ico { flex: none; align-self: center; color: var(--text-ghost); } .tr-ev-commit .traj-ev-ico { color: var(--c-blue); } .tr-ev-agent .traj-ev-ico { color: var(--c-violet); } .tr-ev-warn .traj-ev-ico { color: var(--c-warn); } .tr-ev-good .traj-ev-ico, .tr-ev-done .traj-ev-ico { color: var(--c-green); } .traj-ev-kind { flex: none; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--chip-bg); color: var(--text-dim); border: 1px solid var(--chip-border); } .traj-ev-text { flex: 1 1 auto; min-width: 0; color: var(--text-soft); word-break: break-all; } .traj-ev-text b { color: var(--text-hi); } .traj-ev-time { flex: none; color: var(--text-ghost); font-family: ui-monospace, monospace; font-size: 11px; } @media (min-width: 1024px) { /* 桌面: 轨迹详情不铺满, 居中 760px 卡片 */ #traj-view { left: 50%; right: auto; top: 6vh; bottom: auto; width: 760px; height: min(88vh, 920px); transform: translateX(-50%); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 64px rgba(0,0,0,.45); } #traj-view.opening { animation: none; } } .evt-row { display: flex; gap: 8px; font-size: 12px; line-height: 1.7; font-family: ui-monospace, monospace; flex-wrap: wrap; align-items: baseline; } .evt-ts { color: var(--evt-ts); flex: none; } /* 4.7:1 on --bg-panel */ .evt-name { color: var(--c-warn); flex: none; } .evt-txt { color: var(--text-soft); word-break: break-all; min-width: 200px; } table { width: 100%; border-collapse: collapse; font-size: 13px; } /* 服务页桌面容器: 与其他页一致的圆角面板(移动端行卡片自带容器, 面板只留边框透明) */ .svc-panel { margin-bottom: var(--gap-panel); } .svc-panel table { background: transparent; } .svc-panel thead th { position: static; background: transparent; } thead th { text-align: left; color: var(--text-faint); font-weight: 500; font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; background: var(--bg); } tbody td { padding: 9px 10px; border-bottom: 1px solid var(--border-faint); vertical-align: top; } tbody tr:hover { background: var(--bg-panel); } .name { white-space: nowrap; } .svc { font-weight: 600; color: var(--text-hi); } .port a { color: var(--text-hi); font-weight: 600; text-decoration: none; font-family: ui-monospace, monospace; font-size: 14px; } .port a:hover { text-decoration: underline; color: var(--text-title); } .addr, .pid { color: var(--text-faint); font-family: ui-monospace, monospace; white-space: nowrap; } /* P1-5: 命令列等宽 + 限宽(auto 表格下 nowrap 会把列撑爆 → max-width 锁住, 单行省略) */ .cmd, .cwd { color: var(--text-soft); white-space: normal; word-break: break-all; font-family: ui-monospace, monospace; min-width: 220px; max-width: 430px; overflow: hidden; } table[data-col="cmd"] td.cwd { display: none; } table[data-col="cwd"] td.cmd { display: none; } th.colswitch { min-width: 220px; } .cmd-cell { display: flex; align-items: center; gap: 8px; min-width: 0; } /* P1-5: 命令列单行省略(等宽继承 .cmd), 长命令不再拆行(88/00), 完整内容走"详情"弹层 */ .cmd-cell .cmd-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .svc-detail { flex: none; font-size: 12px; color: var(--c-blue); cursor: pointer; user-select: none; white-space: nowrap; } .svc-detail:hover { text-decoration: underline; } .cmd-ctl { flex: none; display: inline-flex; } .svc-detail-dialog .ui-dialog-msg { font-size: 13px; } .svc-detail-kv { display: grid; grid-template-columns: 84px 1fr; gap: 6px 12px; align-items: start; } .svc-detail-kv .k { color: var(--text-ghost); font-size: 12px; padding-top: 2px; } .svc-detail-kv .v { font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--text-main); word-break: break-all; user-select: all; } .tcol { background: none; border: none; border-radius: 0; padding: 0; color: var(--text-ghost); font-size: 12px; font-weight: 500; cursor: pointer; } /* 列名样式, 非胶囊 */ .tcol + .tcol { margin-left: 12px; } .tcol:hover { color: var(--text-hi); } .tcol.active { color: var(--text-faint); } /* 与 thead th 同色 = 当前列名 */ .badge { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 500; vertical-align: 1px; } .badge-docker { background: var(--tbadge-sc-bg); color: var(--text-mid); border: 1px solid var(--btn-hover); } .badge-systemd { background: var(--tbadge-sc-bg); color: var(--text-soft); border: 1px solid var(--tbadge-sc-bd); } .badge-direct { background: var(--chip-bg); color: var(--text-faint); border: 1px solid var(--chip-border); } .badge-self { background: var(--btn-bg); color: var(--text-title); border: 1px solid var(--btn-hover); } .badge-paused { background: var(--c-warn-bg); color: var(--c-warn); border: 1px solid var(--c-warn-border); } /* P0-6: 服务行行首运行状态点 红=paused/异常 绿=正常 灰=未知(受管状态查询前/查询失败) */ .svc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); margin-right: 7px; flex: none; } .svc-dot.off { background: var(--dot-off); } .svc-dot.bad { background: var(--c-red); } .detail { display: block; color: var(--text-ghost); font-size: 11px; font-family: ui-monospace, monospace; margin-top: 2px; } .local { color: var(--text-dim); font-size: 11px; } .ctl { white-space: nowrap; } .ctl-btn, .svctl-btn { background: var(--btn-bg); border: 1px solid var(--btn-border); color: var(--text-hi); border-radius: 16px; padding: 5px 14px; font-size: 12.5px; cursor: pointer; } .ctl-btn:hover, .svctl-btn:hover { background: var(--btn-hover); } .ctl-btn[aria-disabled="true"], .svctl-btn[aria-disabled="true"] { opacity: .5; cursor: default; } /* 每服务资源行: PID 列下方 CPU·MEM·时长 小字(等宽淡色, 与 .detail 同族) */ .svc-res { color: var(--text-faint); font-size: 11px; font-family: ui-monospace, monospace; } .pid-res { margin-top: 3px; } .svc-summary-res, .res { color: var(--text-faint); font: 11.5px ui-monospace, monospace; } .svc-actions { white-space: nowrap; } .svc-actions .svc-detail { margin-right: 10px; } .svc-summary { display: flex; align-items: center; gap: 10px; padding: 4px 12px 10px; } .svc-summary .port { font: 600 13px ui-monospace, monospace; } .svc-summary-res { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .svc-summary-detail { display: inline-flex; align-items: center; gap: 7px; } .pid-svctl { margin-top: 5px; } .pid-svctl .svctl-btn { padding: 3px 10px; font-size: 11.5px; border-radius: 14px; } .empty { color: var(--text-faint); text-align: center; padding: 48px 0; } /* 空状态(iOS 风): 灰色大图标 + 粗体主标题 + 灰色副标题, 垂直居中大量留白 */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 44px 24px; text-align: center; } .empty-state .es-ico { color: var(--text-ghost); display: inline-flex; } .empty-state .es-title { font-size: 22px; font-weight: 700; color: var(--text-hi); } .empty-state .es-sub { font-size: 13px; color: var(--text-dim); } /* 浮动玻璃刷新圆钮(桌面+移动同款): topbar 滚出视口后由 IntersectionObserver 显示; 点击=刷新/长按=锁定自动刷新, 与 topbar 刷新钮同一状态 */ .fab-refresh { position: fixed; right: 20px; bottom: 24px; z-index: 45; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--glass-bg); border: 1px solid var(--glass-bd); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: var(--glass-shadow); color: var(--text-hi); cursor: pointer; user-select: none; -webkit-user-select: none; transition: transform .18s ease, opacity .18s ease; } .fab-refresh:active { transform: scale(.92); } .fab-refresh.locked { color: var(--c-warn); } /* ---------------- 手机端 (<768px): App 化布局 ---------------- 4 页横向滑动(概览/服务/Goal/管理) + 底部页签栏 + safe-area; 服务表→紧凑卡片, Goal 卡收起次要信息; ≥769px 恢复桌面布局,所有规则只在此断点内生效。 */ @media (max-width: 900px) { .cmd, .cwd { min-width: 120px; } } /* ---------------- 手机端 (<768px): App 化布局 ---------------- 六页横向滑动(概览/日志/Goal/服务/模型/ツール) + 底部页签栏 + safe-area; 服务表→卡片(头行圆形 复制/打开 按钮), goal 卡收起次要信息; ≥769px 恢复桌面布局,所有规则只在此断点内生效。 */ /* ---------------- 概要摘要组件 + 日志时间线(桌面隐藏,手机显示) ---------------- 字号体系: 状态数字 22-24px / 正文 14px / 辅助 12px。 */ .mgrid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; margin-bottom: var(--gap-panel); } .mcell { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .mnum { font-size: 22px; font-weight: 700; color: var(--text-title); font-variant-numeric: tabular-nums; } .mnum.alert { color: var(--c-warn); } .mlabel { font-size: 12px; color: var(--text-dim); } .al-btn:not(.gcopy) { display: inline-flex; align-items: center; color: var(--c-blue); background: none; border: none; padding: 4px 6px; font-size: 12.5px; cursor: pointer; user-select: none; } .al-btn:not(.gcopy):hover { text-decoration: underline; } .al-btn.ignore { color: var(--text-dim); } .alert-item { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--border-faint); } .alert-item:last-child { border-bottom: none; } .al-ico { font-size: 17px; } .al-main { flex: 1 1 auto; min-width: 0; } .al-line { font-size: 14px; color: var(--text-hi); display: flex; gap: 8px; align-items: baseline; min-width: 0; } .al-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .al-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .al-act { display: flex; align-items: center; gap: 6px; flex: none; } .rc-row { display: flex; align-items: center; gap: 8px; padding: 9px 2px; border-bottom: 1px solid var(--border-faint); font-size: 14px; color: var(--text-mid); } .rc-row:last-child { border-bottom: none; } .rc-ico { flex: none; } .rc-kind { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .rc-kind .rc-name { color: var(--text-hi); font-weight: 600; } .rc-sub { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-title { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .rc-tag { font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px; line-height: 1.35; flex: none; } .rc-tag.rc-gh { background: rgba(147, 83, 211, 0.16); color: #bf5af2; border: 1px solid rgba(191, 90, 242, 0.32); } .rc-tag.rc-synced { background: rgba(48, 209, 88, 0.14); color: #30d158; border: 1px solid rgba(48, 209, 88, 0.28); } .rc-tag.rc-local { background: rgba(120, 120, 128, 0.16); color: var(--text-dim); border: 1px solid var(--border); } .h-badge-ro { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(10, 132, 255, 0.14); color: #0a84ff; border: 1px solid rgba(10, 132, 255, 0.28); } .h-online-link { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; cursor: pointer; } .h-online-link:hover { color: var(--text-hi); border-color: rgba(10, 132, 255, .55); background: rgba(10, 132, 255, .22); } .h-ro-arrow { color: var(--text-mid); font-weight: 500; } html.is-readonly .svc-actions .ctl-btn, html.is-readonly .svc-actions .svctl-btn, html.is-readonly .svctl-btn, html.is-readonly .mbtn, html.is-readonly .act-btn, html.is-readonly .agent-ctl-btn, html.is-readonly #hp-aiclean-run, html.is-readonly #tl-clean-scan, html.is-readonly #tl-clean-exec, html.is-readonly #tl-aiclean-run, html.is-readonly #tl-usvc-showlock, html.is-readonly #tl-usvc-unlockwrap, html.is-readonly #refresh, html.is-readonly #fab-refresh, body.is-readonly .svc-actions .ctl-btn, body.is-readonly .svc-actions .svctl-btn, body.is-readonly .svctl-btn, body.is-readonly .mbtn, body.is-readonly .act-btn, body.is-readonly .agent-ctl-btn, body.is-readonly #hp-aiclean-run, body.is-readonly #tl-clean-scan, body.is-readonly #tl-clean-exec, body.is-readonly #tl-aiclean-run, body.is-readonly #tl-usvc-showlock, body.is-readonly #tl-usvc-unlockwrap, body.is-readonly #refresh, body.is-readonly #fab-refresh { display: none !important; } .rc-ago { color: var(--text-dim); font-size: 12px; flex: none; } /* 日志时间线: 第一行 图标+类型+相对时间, 第二行一句话摘要, 详情默认折叠 */ .lv { border-bottom: 1px solid var(--border-faint); padding: 9px 2px 9px 9px; border-left: 3px solid transparent; } .lv-ok { border-left-color: var(--c-green); } /* P1-3: 事件行左缘状态色条 */ .lv-warn { border-left-color: var(--c-warn); } .lv-fail { border-left-color: var(--c-red); } .lv-recover { border-left-color: var(--c-blue); } /* P1-3: 日志状态筛选 chips 色点 成功=绿 告警=黄 失败=红 恢复=蓝 */ .cdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; } .cdot-ok { background: var(--c-green); } .cdot-warn { background: var(--c-warn); } .cdot-fail { background: var(--c-red); } .cdot-recover { background: var(--c-blue); } .lv:last-child { border-bottom: none; } .lv-line1 { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--text-hi); min-width: 0; } .lv-ico { flex: none; display: inline-flex; align-items: center; } .lv-kind { font-weight: 600; flex: none; } .lv-loop { color: var(--c-warn); font-size: 12.5px; flex: none; } .lv-ago { margin-left: auto; color: var(--text-dim); font-size: 12px; flex: none; } .lv-line2 { font-size: 14px; color: var(--text-mid); margin-top: 3px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lv.open .lv-line2 { display: block; } .lv-fold { margin-top: 6px; font-size: 12px; color: var(--c-blue); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } .lv-fold::before { content: "▸"; transition: transform .15s; } .lv.open .lv-fold::before { transform: rotate(90deg); } .lv-meta { display: none; margin-top: 6px; background: var(--bg-deep); border: 1px solid var(--btn-soft-border); border-radius: 6px; padding: 8px 10px; font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-dim); word-break: break-all; line-height: 1.6; } .lv.open .lv-meta { display: block; } .lv-children { display: none; margin-top: 6px; border-left: 2px solid var(--border-soft); padding-left: 8px; } .lv.open > .lv-children { display: block; } .lv-more { font-size: 12px; color: var(--text-dim); padding: 10px 0 2px; } @media (max-width: 768px) { /* 手机: 首页网格单列堆叠(磁贴两列小格); 面板间距收紧到 12 */ :root { --gap-panel: 12px; } .hp-grid { display: block; } .hp-grid .gpanel { margin-bottom: var(--gap-panel); } .hp-tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 7px; } .hp-tile { padding: 9px 10px; font-size: 12.5px; } .meta { display: none !important; } /* 移动端: 更新时间/端口数与主体状态卡重复,隐藏 */ html { -webkit-tap-highlight-color: transparent; } /* topbar 不固定(iOS Large Title 风, 基础样式已静态化/透明/大标题/玻璃圆钮): 移动端仅收窄边距+safe-area, header 由 JS 移入 main 随内容滚出视口 */ header { padding: 12px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); padding-top: calc(8px + env(safe-area-inset-top)); gap: 6px 8px; } /* 确定性两行 grid: 行1=品牌+刷新钮, 行2=连接 chips 整行(flex-wrap 数学不可控) */ header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; } header h1 { grid-row: 1; grid-column: 1; min-width: 0; } header .spacer { display: none; } header .lang-switch { grid-row: 1; grid-column: 2; } header #refresh { grid-row: 1; grid-column: 3; } .h-conn { grid-row: 2; grid-column: 1 / -1; justify-self: start; padding: 2px 2px 0; } .h-conn .gcopy { min-height: 30px; padding: 4px 11px; } /* 触控可点但不吃全局 .gcopy 38px */ .btn, .chip, .mbtn, .ctl-btn, .tcol, .aglog-refresh { padding: 9px 14px; font-size: 13px; min-height: 38px; } /* 内部滚动: main 自滚, 底部页签栏固定在文档流尾, 不再遮住最后一屏 */ html, body { height: 100%; } ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-thumb { background: var(--chip-border); border-radius: 2px; } ::-webkit-scrollbar-track { background: transparent; } body { display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: none; } main { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; padding: 10px max(12px, env(safe-area-inset-right)) 16px max(12px, env(safe-area-inset-left)); } /* 每页底部留出 悬浮底栏(64px)+悬浮空隙(12px)+余量(24px)+safe-area: 末条完整露出 */ #track > .pg { padding-bottom: calc(52px + 12px + env(safe-area-inset-bottom, 0px)); } /* 底部导航栏: 更沉底、紧凑贴手、单手操作更顺畅, 带下滑隐藏动效 */ #tabbar { display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(4px + env(safe-area-inset-bottom, 0px)); z-index: 40; border-radius: 20px; padding: 4px 6px; background: var(--glass-bg); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); border: 1px solid var(--glass-bd); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.38); transition: transform .28s cubic-bezier(0.2, 0, 0, 1), opacity .22s ease; will-change: transform, opacity; } #tabbar.tabbar-hidden { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; } #tabbar .tab { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 2px; min-height: 44px; border-radius: 16px; color: var(--text-faint); font-size: 10px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: background .18s ease, color .18s ease; } #tabbar .tab.active { background: var(--nav-pill); color: var(--accent); } #tabbar .tab svg { width: 19px; height: 19px; } /* 概要页签未处理告警徽章: 红点+数字 */ .tbadge-dot { position: absolute; top: 1px; left: calc(50% + 10px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #c04848; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--glass-bg); } /* 浮动刷新圆钮基础样式在全局(桌面同款): 移动端适度下移 */ .fab-refresh { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); } /* 移动端活动页深度精简: 隐藏多余的标题、介绍、筛选芯片，直奔全部提交流 */ #activity-page .act-header, #activity-page #act-filters { display: none !important; } #activity-page { padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } .act-group-card { margin-bottom: 8px !important; padding: 6px 8px !important; } .act-card { padding: 8px 6px !important; } /* 两层结构: #pages(裁剪窗口) > #track(500% 轨道) > .pg(各 1/5 = 屏宽) */ #pages { display: block; width: 100%; overflow: hidden; } body { overscroll-behavior-x: none; } #pages { touch-action: pan-y; } /* 纵向保留原生高速滚动，横向交由左右滑动切页手势接管 */ .filters { touch-action: pan-x; } #track { display: flex; align-items: flex-start; width: 500%; will-change: transform; transition: transform .26s cubic-bezier(.22,.61,.36,1), height .26s cubic-bezier(.22,.61,.36,1); } #track.stick { transition: none; } #track > .pg { flex: 0 0 20%; min-width: 20%; max-width: 20%; } .skel { display: block; } #chart-wrap, #logpage, #agents-page, #toolspage, #activity-page, #network-page { display: block; } /* 移动专用面板 */ #logpage[hidden], #agents-page[hidden], #toolspage[hidden], #activity-page[hidden], #network-page[hidden] { display: none !important; } /* 概要摘要组件(指标2×2+需要处理+最近活动) */ .mgrid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: var(--gap-panel); } .svc-panel { background: transparent; border: none; padding: 0; box-shadow: none; } #alerts, #recent { display: block; margin-bottom: var(--gap-panel); } #recent h2 { display: flex; justify-content: space-between; align-items: baseline; } .rc-more { cursor: pointer; } #events { display: none; } /* 概要页只留 3-5 条摘要(最近活动), 全量事件进日志页 */ .lv { display: block; } #log-filters { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -12px 10px; padding: 0 12px 4px; } #log-filters::-webkit-scrollbar { display: none; } #log-filters .chip { flex: none; } .sysbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--gap-panel); } /* 双列 2×N(桌面为 5 列 grid) */ .stat { min-width: calc(50% - 6px); flex: 1 1 calc(50% - 6px); padding: 8px 12px; touch-action: manipulation; } /* 双击手势目标: 消除 300ms 缩放 */ .stat .value { font-size: 12.5px; } /* chips 横向滚动 */ .filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -12px var(--gap-panel); padding: 0 12px 4px; } .filters::-webkit-scrollbar { display: none; } .filters .spacer { display: none; } .chip { flex: none; font-size: 12.5px; } /* 横滚 chips 容器左右渐隐: JS setupFiltersFade 按滚动位置加类, 仅溢出时生效 */ .filters.hf-ov { --hf: 22px; } .filters.hf-ov.hf-r:not(.hf-l) { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--hf)), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--hf)), transparent 100%); } .filters.hf-ov.hf-l:not(.hf-r) { -webkit-mask-image: linear-gradient(to left, #000 0, #000 calc(100% - var(--hf)), transparent 100%); mask-image: linear-gradient(to left, #000 0, #000 calc(100% - var(--hf)), transparent 100%); } .filters.hf-ov.hf-l.hf-r { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--hf), #000 calc(100% - var(--hf)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--hf), #000 calc(100% - var(--hf)), transparent 100%); } /* agent 子页签条同款渐隐: 右侧还有页签时露出可滑提示 */ .agent-subnav.hf-ov { --hf: 22px; } .agent-subnav.hf-ov.hf-r:not(.hf-l) { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--hf)), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--hf)), transparent 100%); } .agent-subnav.hf-ov.hf-l:not(.hf-r) { -webkit-mask-image: linear-gradient(to left, #000 0, #000 calc(100% - var(--hf)), transparent 100%); mask-image: linear-gradient(to left, #000 0, #000 calc(100% - var(--hf)), transparent 100%); } .agent-subnav.hf-ov.hf-l.hf-r { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--hf), #000 calc(100% - var(--hf)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--hf), #000 calc(100% - var(--hf)), transparent 100%); } /* 服务列表 → 卡片(头行右侧显式 44px 圆形 复制/打开 按钮, 无滑扫手势) */ #svc thead { display: none; } #svc tbody tr { display: block; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; } #svc tbody tr:has(> td.empty) { background: none; border: none; } #svc tbody td { display: block; border: none; padding: 0; } #svc tbody td.empty { text-align: center; padding: 32px 0; } .td-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px 4px; } .td-head .svc { flex: 1 1 auto; } .td-rows { padding: 4px 12px 10px; } .td-rows .kv { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 3px 0; } .td-rows .k { color: var(--text-ghost); font-size: 11px; flex: none; } .td-rows .v { text-align: right; word-break: break-all; white-space: normal; min-width: 0; } /* P1-6: 长命令默认折叠 2 行, 点展开(mclamp 切换) */ .td-rows .v .mclamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; cursor: pointer; } .td-rows .v .mclamp.open { -webkit-line-clamp: unset; display: block; } .svc-summary-detail .svc-detail { font-size: 11px; } .svc-summary-detail .ctl-btn, .svc-summary-detail .svctl-btn { min-height: 30px; padding: 4px 8px; font-size: 11px; } .ctl-btn, .svctl-btn { min-height: 44px; padding: 10px 16px; font-size: 13px; } .svctl-btn.hp-sv { min-height: 0; width: 28px; height: 28px; padding: 0; } /* 磁贴迷你钮不受 44px 拉高 */ .colswitch, .tcol { display: none; } .empty { padding: 32px 0; } /* watchdog / agent / tmux 面板表 → 卡片 */ .watchdog-panel { padding: 10px 12px; } .watchdog-panel thead { display: none; } .watchdog-panel tbody tr { display: block; padding: 6px 0; } .watchdog-panel td { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border: none; padding: 3px 0; white-space: normal !important; } .watchdog-panel td::before { content: attr(data-label); color: var(--text-ghost); font-size: 11px; flex: none; } .watchdog-panel td:first-child { display: block; padding: 2px 0 4px; } .watchdog-panel td:first-child::before { content: none; } .watchdog-panel .tcmd { max-width: none; } .watchdog-panel .agent-detail td { display: block; padding: 8px 4px; } .watchdog-panel .agent-detail td::before { content: none; } .aglog-row { flex-wrap: wrap; gap: 2px 8px; padding: 4px 0; } .aglog-ts { flex: none; } .termlog { font-size: 10.5px; -webkit-overflow-scrolling: touch; } /* 日志页: 展开式(不嵌套滚动) */ #logpage .agentlog { max-height: none; overflow: visible; } .logbar { margin-bottom: var(--gap-panel); } /* 服务管理卡片 */ .mgrid { grid-template-columns: 1fr; gap: 10px; } .mcard { padding: 12px; } .mcard .mbtns { gap: 6px; } .mcard .mbtn { flex: 1 1 auto; min-width: 88px; padding: 11px 8px; font-size: 13.5px; } .mcard .mresult { font-size: 12.5px; } /* Goal 卡片/负载线/事件: 单列可读 */ .gcards { grid-template-columns: 1fr; gap: 8px; } .gcard .grow { flex-wrap: wrap; } .gextra { display: none; } /* 手机: 次要信息默认收起 */ .gcard.open .gextra { display: block; } .gmore { display: inline-flex; margin-left: auto; transition: transform .15s; } .gcard.open .gmore { transform: rotate(90deg); } .gpanel { padding: 10px 12px; } .rp-l1 { font-size: 13px; } .evt-row { gap: 6px; } .evt-txt { min-width: 0; flex: 1 1 100%; padding-left: 14px; } .gcopy { min-height: 38px; padding: 9px 16px; font-size: 13px; } /* 详情弹层移动端: 单栏 + 终端收窄; 弹层贴边留 12px */ .ui-modal { padding: 12px; } .ui-modal .ui-dialog { border-radius: 16px; } .g-detail-grid { grid-template-columns: 1fr; gap: 0; } .g-detail-log { font-size: 10.5px; max-height: 300px; padding: 9px 10px; line-height: 1.42; } .gdone-row { font-size: 11.5px; } } @media (prefers-reduced-motion: reduce) { #track, .gmore { transition: none !important; } .skel-line { animation: none; } .fab-refresh, #tabbar .tab { transition: none !important; } .fab-refresh:active { transform: none; } } /* 玻璃材质降级: 低端设备不支持 backdrop-filter → 不透明实底 */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #tabbar, .fab-refresh, .icon-btn { background: var(--bg-elev); } } /* ---------------- ツール页: 4 分组(巡检/运维/直达/偏好) + 桌面 2 列 ---------------- */ .tl-group { margin-top: 16px; } .tl-grouph { margin: 0 0 4px; font-size: 13px; color: var(--text-dim); font-weight: 500; display: flex; align-items: center; gap: 8px; } .tl-grouph::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border-faint); } .tl-group .tl-sec { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; } .tl-group .tl-sec + .tl-sec { margin-top: 0; } #toolspage { row-gap: 12px; } @media (min-width: 769px) { #toolspage[hidden] { display: none !important; } /* 工具页: 运维操作一排(3列) → 巡检诊断一排(3列) → 计划任务全宽; 分组头不再占整行 */ #toolspage { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 14px; align-items: start; } #toolspage > h2, #tlg-pref { grid-column: 1 / -1; } #tlg-insp, #tlg-ops { grid-column: 1 / -1; display: contents; } #tlg-insp .tl-grouph, #tlg-ops .tl-grouph { grid-column: 1 / -1; } /* 卡片按内容自适应高度; 计划任务全宽第二排(内部限高), 避免撑高同行 */ #tl-health, #tl-net, #tl-clean, #tl-usvc { grid-column: span 2; align-self: start; } #tlg-insp { grid-column: 1; } #tlg-ops { grid-column: 2; } .tl-group { margin-top: 20px; } } /* 计划任务(服务页): 与服务表同一套表格样式, 仅限高滚动 + 列宽 */ #cron-panel #tl-cron-body { max-height: 340px; } #cron-panel table { background: transparent; } #cron-panel thead th { position: static; background: transparent; } #cron-panel .cron-sch { color: var(--text-soft); white-space: nowrap; font-family: ui-monospace, monospace; font-size: 12.5px; } #cron-panel .cron-src { white-space: nowrap; } #cron-panel .cron-scope { color: var(--text-faint); font-size: 11.5px; } #cron-panel td.empty { text-align: center; color: var(--text-dead); padding: 18px 0; } .toolspage .tl-sec h3 { margin: 0 0 8px; font-size: 12.5px; color: var(--text-dim); font-weight: 500; display: flex; align-items: center; gap: 6px; } .tl-sechead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tl-sechead h3 { margin: 0; flex: 1 1 auto; } .tl-run { flex: none; cursor: pointer; user-select: none; } #tl-cron-body { overflow-y: auto; padding-right: 4px; } .tl-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px dashed var(--border-faint); } .tl-row:last-child { border-bottom: none; } .tl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); } .tl-dot.warn { background: var(--c-warn); } .tl-dot.bad { background: var(--c-red); } .tl-dot.off { background: var(--dot-off); } .tl-name { color: var(--text-mid); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tl-val { margin-left: auto; color: var(--text-faint); font-family: ui-monospace, monospace; font-size: 11.5px; white-space: nowrap; } .tl-val b { color: var(--text-hi); font-weight: 600; } .tl-head-big { font-size: 15px; font-weight: 600; } .themechips { margin-bottom: 0; } .tl-cleanrow { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 12.5px; border-bottom: 1px dashed var(--border-faint); } .clean-toggle { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--chip-border); border-radius: 6px; color: var(--text-dead); cursor: pointer; } .clean-toggle.selected { background: var(--accent-blue-bg); border-color: var(--accent-blue-bd); color: var(--accent-blue-tx); } .tl-cleanrow:last-child { border-bottom: none; } .tl-cleanrow .lbl { flex: 1 1 auto; min-width: 0; } .tl-cleanrow .lbl small { display: block; color: var(--text-dead); font-size: 11px; margin-top: 1px; word-break: break-all; } .tl-cleanrow .sz { flex: none; color: var(--text-hi); font-family: ui-monospace, monospace; font-size: 12px; } .tl-docker-pre { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: 11px ui-monospace, monospace; color: var(--text-dim); overflow-x: auto; white-space: pre; margin: 8px 0; } #tl-lightbox { position: fixed; inset: 0; z-index: 80; background: var(--scrim); display: flex; align-items: center; justify-content: center; flex-direction: column; } #tl-lightbox img { max-width: 96vw; max-height: 88vh; object-fit: contain; } .tl-lb-close { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-mid); background: var(--btn-soft-bg); border: 1px solid var(--chip-border); border-radius: 50%; cursor: pointer; } .tl-usvc-unlock { display: inline-flex; gap: 6px; align-items: center; } .tl-usvc-unlock input { width: 110px; background: var(--bg-input); color: var(--text); border: 1px solid var(--chip-border); border-radius: 8px; padding: 7px 10px; font-size: 13px; } .tl-netrow { display: flex; gap: 8px; align-items: center; padding: 5px 0; font-size: 12.5px; } .tl-netrow .tl-val { margin-left: 0; } .tl-netrow .sep { flex: 1 1 auto; border-bottom: 1px dotted var(--btn-hover); } /* 非原生交互控件: 确认层/通知层/复选框/选择器统一使用主题变量 */ body.modal-open { overflow: hidden; } .ui-modal[hidden], .ui-notice[hidden] { display: none !important; } .ui-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.46); } .ui-dialog { width: min(440px, 100%); padding: 22px; border: 1px solid var(--glass-bd); border-radius: 22px; background: var(--glass-bg); color: var(--text-title); box-shadow: 0 18px 60px rgba(0,0,0,.32); backdrop-filter: blur(22px); } .ui-dialog-title { display:flex; align-items:center; gap:9px; font-weight:700; font-size:16px; margin-bottom:12px; } .ui-dialog-msg { white-space: pre-wrap; line-height:1.55; color:var(--text-main); } .ui-dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:20px; } .ui-action { min-height:40px; padding:9px 16px; border-radius:13px; border:1px solid var(--glass-bd); background:var(--btn-soft-bg); color:var(--text-main); cursor:pointer; font:inherit; } .ui-action.primary { background:var(--accent); border-color:var(--accent); color:#fff; } .ui-action:hover { filter:brightness(1.08); } .ui-notice { position:fixed; z-index:1100; left:50%; bottom:32px; transform:translateX(-50%); max-width:min(520px, calc(100vw - 32px)); padding:12px 16px; border:1px solid var(--glass-bd); border-radius:15px; background:var(--glass-bg); color:var(--text-main); box-shadow:0 12px 36px rgba(0,0,0,.28); backdrop-filter:blur(18px); } .ui-select { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:40px; min-width:min(100%, 360px); padding:9px 12px 9px 13px; border:1px solid var(--glass-bd); border-radius:13px; background:var(--glass-bg); color:var(--text-main); cursor:pointer; } .ui-select-chevron { color:var(--text-dim); display:flex; } .ui-select-menu { position:absolute; z-index:900; left:0; right:0; top:calc(100% + 7px); max-height:260px; overflow:auto; padding:5px; border:1px solid var(--glass-bd); border-radius:15px; background:var(--bg-elev); box-shadow:0 14px 40px rgba(0,0,0,.28); } .ui-select-menu[hidden] { display:none; } .ui-option { padding:10px 11px; border-radius:10px; color:var(--text-main); cursor:pointer; } .ui-option:hover, .ui-option.active { background:var(--btn-soft-hover); color:var(--text-title); } .select-model { position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; } input[type="checkbox"] { appearance:none; -webkit-appearance:none; width:18px; height:18px; margin:0 8px 0 0; vertical-align:-4px; border:1px solid var(--btn-soft-bd); border-radius:5px; background:var(--btn-soft-bg); cursor:pointer; } input[type="checkbox"]:checked { border-color:var(--accent); background:var(--accent); } input[type="checkbox"]:checked::after { content:""; display:block; width:5px; height:9px; margin:2px 0 0 5px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); } select { appearance:none; -webkit-appearance:none; min-height:40px; padding:9px 34px 9px 13px; border:1px solid var(--glass-bd); border-radius:13px; color:var(--text-main); background:var(--glass-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%238b8b95' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center; font:inherit; color-scheme:dark; } [data-theme="light"] select { color-scheme:light; } @media (prefers-reduced-motion: reduce) { .ui-modal, .ui-notice, .ui-dialog { transition:none !important; } } .copy-toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; background: var(--glass-bg); color: var(--c-green); border: 1px solid var(--glass-bd); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: var(--glass-shadow); border-radius: 999px; padding: 9px 18px; font-size: 12.5px; z-index: 60; pointer-events: none; transition: opacity .3s; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .copy-toast { background: var(--bg-elev); color: var(--c-green); } } /* 桌面端分类条(右上角): 移动端隐藏(有底部页签); 选中态复用 --nav-pill+--accent */ #catbar { display: none; gap: 6px; align-items: center; } #catbar .cat { appearance: none; border: 1px solid var(--chip-border); background: var(--chip-bg); color: var(--text-mid); border-radius: 999px; padding: 7px 15px; font-size: 12.5px; cursor: pointer; transition: background .18s ease, color .18s ease; } #catbar .cat:hover { color: var(--text-hi); } #catbar .cat.active { background: var(--nav-pill); border-color: transparent; color: var(--accent); font-weight: 600; } .cat-off { display: none !important; } /* 分类过滤: 仅桌面 JS 加, 断点切回移动时移除 */ @media (min-width: 769px) { #catbar { display: flex; } } /* "全部"模式预览折叠: 分区限高渐隐 + 右下"查看更多"跳对应分类 */ /* ===== Agent 运行时总览 (rt-*) ===== */ @keyframes rtPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* 过滤 chips + 工具行 */ .rt-toolbar { display: flex; align-items: center; gap: 10px; margin: 12px 0 2px; } .rt-filters { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding: 2px; -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); mask-image: linear-gradient(90deg, #000 94%, transparent); } .rt-filters::-webkit-scrollbar { display: none; } .rt-f { flex: none; font-size: 12px; padding: 5px 13px; border-radius: 999px; border: 1px solid var(--chip-border); background: var(--chip-bg); color: var(--text-dim); cursor: pointer; transition: color .15s, background .15s; } .rt-f em { font-style: normal; opacity: .55; margin-left: 5px; font-size: 10.5px; } .rt-f:hover { color: var(--text-hi); } .rt-f.on { background: var(--chip-on-bg); color: var(--chip-on-tx); border-color: transparent; font-weight: 600; } .rt-f.on em { opacity: .7; } /* 分组区块 */ .rt-sec { margin: 16px 0 2px; } .rt-sechead { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-dim); font-weight: 700; margin: 0 0 10px; letter-spacing: .04em; } .rt-sechead .rt-sq { width: 9px; height: 9px; border-radius: 3px; flex: none; } .rt-sq.run { background: var(--c-green); box-shadow: 0 0 5px rgba(110,200,154,.5); } .rt-sq.idle { background: var(--c-gray); } .rt-sq.none { background: transparent; border: 1.5px dashed var(--text-ghost); } .rt-sechead em { font-style: normal; color: var(--text-ghost); font-weight: 500; } /* 卡片: 左侧状态竖条 + 内容 */ .rt-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); align-items: stretch; } .rt-card { position: relative; background: var(--bg-panel); border: 1px solid var(--border-faint); border-radius: 12px; padding: 12px 14px 11px 17px; display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow: hidden; } .rt-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; } .rt-card.run { border-color: rgba(110,200,154,.22); } .rt-card.run::before { background: var(--c-green); animation: rtPulse 2.6s ease-in-out infinite; } .rt-card.idle::before { background: var(--border-soft); } .rt-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .rt-head b { font-size: 13.5px; white-space: nowrap; } .rt-ver { margin-left: auto; font-size: 10.5px; color: var(--text-ghost); max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-sub { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-procline { font-size: 11.5px; color: var(--text-dim); } .rt-procline b { color: var(--text-soft); font-weight: 600; font-variant-numeric: tabular-nums; } /* 额度块: 标签+大百分比 / 6px 条 / 重置时间 */ .rt-q { display: flex; flex-direction: column; gap: 3px; } .rt-q-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-dim); } .rt-q-top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-q-top b { font-size: 13px; font-variant-numeric: tabular-nums; flex: none; } .rt-q.green .rt-q-top b { color: var(--c-green); } .rt-q.warn .rt-q-top b { color: var(--c-warn); } .rt-q.red .rt-q-top b { color: var(--c-red); } .rt-q-track { height: 6px; border-radius: 4px; background: rgba(128,128,128,.14); overflow: hidden; } .rt-q-track i { display: block; height: 100%; border-radius: 4px; transition: width .4s ease; } .rt-q.green .rt-q-track i { background: var(--c-green); } .rt-q.warn .rt-q-track i { background: var(--c-warn); } .rt-q.red .rt-q-track i { background: var(--c-red); } .rt-q-sub { font-size: 10px; color: var(--text-ghost); } .rt-q.red .rt-q-sub { color: var(--c-red); opacity: .8; } .rt-qnone { font-size: 11.5px; color: var(--text-ghost); } /* 任务行 */ .rt-tasks { display: flex; flex-direction: column; gap: 5px; border-top: 1px dashed var(--border-faint); padding-top: 8px; margin-top: 2px; } .rt-task { display: flex; align-items: baseline; gap: 7px; font-size: 12px; cursor: pointer; min-width: 0; } .rt-task:hover .rt-taskgoal { color: var(--accent); } .rt-taskgoal { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-taskmeta { flex: none; font-size: 10.5px; color: var(--text-ghost); font-variant-numeric: tabular-nums; } .rt-dot2 { width: 7px; height: 7px; border-radius: 50%; flex: none; align-self: center; } .rt-dot2.run { background: var(--c-green); } .rt-dot2.warn { background: var(--c-warn); } .rt-dot2.dim { background: var(--text-ghost); } /* 按钮 */ .rt-actions { margin-top: auto; display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; } .rt-btn { font-size: 12px; padding: 4px 13px; border-radius: 8px; border: 1px solid var(--chip-border); background: var(--chip-bg); color: var(--text-dim); cursor: pointer; flex: none; } .rt-btn:hover { color: var(--accent); border-color: var(--accent); } .rt-btn.danger:hover { color: var(--c-red); border-color: var(--c-red); } .rt-btn.ghost { border-color: transparent; background: transparent; } .rt-btn:disabled { opacity: .5; cursor: default; } /* 未安装: 虚线单行 */ .rt-none-list { display: flex; flex-direction: column; gap: 6px; } .rt-none-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px dashed var(--border-faint); border-radius: 10px; font-size: 12.5px; color: var(--text-dim); } .rt-none-row b { font-weight: 600; } .rt-none-row .rt-btn { margin-left: auto; } /* 其他 */ .rt-low { font-size: 12.5px; color: var(--c-warn); background: rgba(200,150,40,.08); border: 1px solid rgba(200,150,40,.3); border-radius: 8px; padding: 6px 10px; margin-top: 8px; } .rt-qrefresh { font-size: 12px; color: var(--text-ghost); margin-top: 8px; } .rt-empty { padding: 28px 12px; text-align: center; color: var(--text-ghost); font-size: 12.5px; } .rt-hist { font-size: 11px; color: var(--text-ghost); margin-top: 14px; display: flex; flex-direction: column; gap: 2px; } @media (max-width: 768px) { .rt-grid { grid-template-columns: 1fr; } .rt-toolbar { flex-wrap: wrap; } .rt-toolbar .rt-btn { margin-left: auto; } } /* ===== Agent 页 · 模型区块 (rt-m*) ===== */ .rt-sq.model { background: var(--c-violet); box-shadow: 0 0 5px rgba(157,140,245,.4); } .rt-mhint { font-size: 11px; color: var(--text-ghost); margin: -4px 0 10px; } .rt-mgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; } .rt-mcard { background: var(--bg-panel); border: 1px solid var(--border-faint); border-radius: 12px; padding: 10px 13px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .rt-mhead { display: flex; align-items: center; gap: 7px; min-width: 0; } .rt-mhead b { font-size: 12.5px; white-space: nowrap; } .rt-mkey { width: 7px; height: 7px; border-radius: 50%; background: var(--c-red); flex: none; } .rt-mkey.ok { background: var(--c-green); } .rt-mprobe { font-style: normal; font-size: 9.5px; color: var(--c-warn); border: 1px solid rgba(200,150,40,.4); border-radius: 999px; padding: 1px 7px; flex: none; } .rt-mhost { margin-left: auto; font-size: 10px; color: var(--text-ghost); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-mrow { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-top: 1px dashed var(--border-faint); font-size: 11.5px; } .rt-mid { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); font-family: var(--mono, ui-monospace, monospace); font-size: 11px; } .rt-macts { display: flex; align-items: center; gap: 6px; flex: none; } .rt-mst { font-size: 10.5px; font-variant-numeric: tabular-nums; } .rt-mst.ok { color: var(--c-green); } .rt-mst.err { color: var(--c-red); cursor: help; } .rt-mst.testing { color: var(--text-ghost); animation: rtPulse 1.4s ease-in-out infinite; } .rt-macts .rt-btn { font-size: 10.5px; padding: 2px 9px; } @media (max-width: 768px) { .rt-mgrid { grid-template-columns: 1fr; } } /* ---- AI 一键清理: 首页面板 + 日志弹层 ---- */ .hp-aiclean-body { display: flex; align-items: center; gap: 12px; padding: 4px 0 10px; } .hp-aiclean-st { font-size: 12px; color: var(--text-ghost); } .hp-aiclean-st.running { color: var(--c-green); animation: rtPulse 1.4s ease-in-out infinite; } .hp-aiclean-st.error { color: var(--c-red); } .aiclean-dialog { width: min(860px, calc(100vw - 48px)); height: min(78vh, 720px); display: flex; flex-direction: column; padding: 18px 20px; border: 1px solid var(--glass-bd); border-radius: 22px; background: var(--glass-bg); color: var(--text-title); box-shadow: 0 18px 60px rgba(0,0,0,.32); backdrop-filter: blur(22px); } .aiclean-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; padding-bottom: 10px; } .aiclean-st { font-size: 12px; font-weight: 400; color: var(--text-ghost); } .aiclean-st.running { color: var(--c-green); animation: rtPulse 1.4s ease-in-out infinite; } .aiclean-st.error { color: var(--c-red); } .aiclean-log { flex: 1; overflow: auto; margin: 0; padding: 12px 14px; border-radius: 12px; font: 11.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(0,0,0,.28); color: var(--text-body, #d8d4cc); white-space: pre-wrap; word-break: break-all; } .aiclean-actions { display: flex; justify-content: center; padding-top: 10px; } /* ---- 活动页 (Activity Stream) ---- */ #activity-page { display: flex; flex-direction: column; gap: 14px; } .act-header { display: flex; align-items: baseline; justify-content: space-between; } .act-repo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rc-col, var(--text-soft)); flex-shrink: 0; } .btn-act-resume { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border-faint); background: rgba(128,128,128,.08); color: var(--text-soft); font-size: 11.5px; cursor: pointer; transition: all .12s ease; } .btn-act-resume:hover { background: var(--bg-hover); color: var(--text-title); } .act-filters { margin-bottom: 6px; } /* ---- 活动页 GitHub 风格时间线 ---- */ .act-timeline { position: relative; display: flex; flex-direction: column; gap: 16px; padding-left: 32px; } .act-date-group { position: relative; display: flex; flex-direction: column; gap: 12px; } .act-date-header { position: relative; display: flex; align-items: center; gap: 8px; margin-left: -32px; padding: 4px 0 2px; user-select: none; } .act-node-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 20px; flex: none; background: transparent; z-index: 2; } .act-node-svg { width: 24px; height: 18px; color: var(--text-soft); } .act-date-title { font-size: 13px; font-weight: 600; color: var(--text-soft); display: inline-flex; align-items: center; gap: 8px; } .act-date-count { font-size: 11px; font-weight: 400; color: var(--text-ghost); } /* 仓库连续提交簇: 同一仓库连续提交归为一簇，不同仓库之间通过独立卡片和间距严格隔开 */ .act-repo-cluster { position: relative; } .act-group-card { background: var(--bg-panel); border: 1px solid var(--border-faint); border-radius: 14px; overflow: visible; box-shadow: 0 2px 10px rgba(0,0,0,.04); } .act-card { position: relative; padding: 13px 16px; display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--border-faint); background: transparent; transition: background .12s ease; } .act-card:first-child { border-top: none; border-top-left-radius: 13px; border-top-right-radius: 13px; } .act-card:last-child { border-bottom-left-radius: 13px; border-bottom-right-radius: 13px; } .act-card:only-child { border-radius: 13px; } .act-card:hover { background: rgba(128,128,128,.03); } /* 节点与小柱子: 只有同一仓库连续提交才由该仓库专属颜色的小柱子连接 */ .act-node { position: absolute; left: -25px; top: 19px; width: 10px; height: 10px; border-radius: 50%; background: var(--rc-col, var(--text-soft)); box-shadow: 0 0 0 3px var(--bg, #0a0a0a); z-index: 2; transition: transform .12s ease; } .act-card:hover .act-node { transform: scale(1.15); } /* 纵向小柱子脊柱: 起于首条提交节点，止于末条提交节点 */ .act-spine { position: absolute; left: -21px; width: 2.5px; background: var(--rc-col, var(--border-subtle)); border-radius: 1.5px; z-index: 1; } .act-spine.spine-bot { top: 24px; bottom: 0; } .act-spine.spine-full { top: 0; bottom: 0; } .act-spine.spine-top { top: 0; height: 24px; } @media (max-width: 768px) { .act-timeline { padding-left: 26px; gap: 14px; } .act-date-header { margin-left: -26px; } .act-node-icon { width: 20px; } .act-node { left: -20px; top: 17px; width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--bg, #0a0a0a); } .act-spine { left: -17px; width: 2px; } .act-spine.spine-bot { top: 21px; bottom: 0; } .act-spine.spine-top { top: 0; height: 21px; } .act-card { padding: 11px 12px; gap: 8px; } } .act-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; } .act-badge-repo { font-weight: 600; color: var(--text-title); background: rgba(128,128,128,.12); padding: 2px 8px; border-radius: 6px; font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; } .act-branch { color: var(--text-ghost); font-size: 11.5px; display: inline-flex; align-items: center; gap: 3px; } .act-sha { font-family: var(--mono, ui-monospace, monospace); color: var(--text-soft); font-size: 11.5px; background: rgba(128,128,128,.08); padding: 2px 6px; border-radius: 4px; } .act-time { margin-left: auto; color: var(--text-ghost); font-size: 11px; white-space: nowrap; } .act-body { display: flex; flex-direction: column; gap: 5px; } .act-subj { font-size: 13.5px; font-weight: 600; color: var(--text-title); line-height: 1.45; word-break: break-word; } .rc-img { background: rgba(168, 85, 247, .16); color: #c084fc; border: 1px solid rgba(168, 85, 247, .3); } .act-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 11.5px; color: var(--text-ghost); margin-top: 1px; } .act-time-full { display: inline-flex; align-items: center; gap: 4px; color: var(--text-soft); font-family: var(--mono, ui-monospace, monospace); font-size: 11px; } .act-author { font-size: 11.5px; color: var(--text-ghost); } .act-dot-sep { color: var(--border-subtle, rgba(128,128,128,.3)); } .act-f-row.is-img { background: rgba(168, 85, 247, .08); border-radius: 4px; padding: 1px 4px; } .act-img-dot { color: #c084fc; display: inline-flex; align-items: center; margin-left: 2px; } .act-files-summary { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-soft); margin-top: 4px; font-weight: 500; } .act-files-box { background: rgba(0,0,0,.08); border: 1px solid var(--border-faint); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; font-family: var(--mono, ui-monospace, monospace); font-size: 11px; max-height: 240px; overflow-y: auto; } .act-f-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; } .fbadge { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 4px; font-size: 10px; font-weight: 700; flex: none; } .fbadge-m { background: rgba(234, 179, 8, .18); color: #eab308; } .fbadge-a { background: rgba(34, 197, 94, .18); color: #22c55e; } .fbadge-d { background: rgba(239, 68, 68, .18); color: #ef4444; } .fbadge-r { background: rgba(147, 51, 234, .18); color: #a855f7; } .act-f-path { overflow: hidden; text-overflow: ellipsis; color: var(--text-soft); } .act-actions { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; } .btn-act { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-hover, rgba(128,128,128,.1)); border: 1px solid var(--border-faint); border-radius: 7px; padding: 4px 11px; font-size: 11.5px; font-weight: 500; color: var(--text-title); cursor: pointer; text-decoration: none; transition: all .15s ease; } .btn-act:hover { background: var(--bg-panel); border-color: var(--border-subtle); color: var(--c-primary, #60a5fa); } .btn-act-gh { color: var(--text-title); } .btn-act-diff { color: var(--text-soft); } .btn-act-diff.active { background: rgba(59, 130, 246, .14); border-color: rgba(59, 130, 246, .4); color: var(--c-primary, #60a5fa); } .act-diff-box { margin-top: 6px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-faint); background: rgba(0,0,0,.22); } .act-diff-pre { margin: 0; padding: 12px 14px; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x: auto; white-space: pre; color: var(--text-body, #d8d4cc); } .diff-line { display: block; min-height: 1.4em; } .diff-add { background: rgba(34, 197, 94, .14); color: #4ade80; } .diff-del { background: rgba(239, 68, 68, .14); color: #f87171; } .diff-hunk { background: rgba(59, 130, 246, .12); color: #93c5fd; font-weight: 600; } .diff-meta { color: var(--text-ghost); } .diff-stat { color: #facc15; } /* ========================================================================== Tmux Hub (Tmux 会话中枢) ========================================================================== */ .tmux-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .tmux-header h2 { margin: 0; } .tmux-summary-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; } .tmux-stat-card { background: var(--bg-card, rgba(255,255,255,.025)); border: 1px solid var(--border-faint); border-radius: 9px; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; } .tmux-stat-val { font-size: 18px; font-weight: 700; color: var(--text-title); display: flex; align-items: center; gap: 6px; } .tmux-stat-val small { font-size: 11px; font-weight: 400; color: var(--text-soft); } .tmux-stat-lbl { font-size: 11px; color: var(--text-soft); } .tmux-session-card { background: var(--bg-card, rgba(255,255,255,.025)); border: 1px solid var(--border-subtle, rgba(255,255,255,.08)); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; transition: border-color .15s ease, box-shadow .15s ease; position: relative; } .tmux-session-card:hover { border-color: var(--border-faint, rgba(255,255,255,.18)); } .tmux-card-top { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .tmux-card-title-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tmux-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .tmux-status-dot.attached { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, .6); } .tmux-status-dot.detached { background: #3b82f6; opacity: .85; } .tmux-status-dot.agent { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, .5); } .tmux-sname { font-size: 15px; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-title); letter-spacing: -.2px; } .tmux-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; font-size: 11px; font-weight: 500; } .tmux-badge-att { background: rgba(34, 197, 94, .12); color: #4ade80; border: 1px solid rgba(34, 197, 94, .25); } .tmux-badge-det { background: rgba(148, 163, 184, .1); color: var(--text-soft); border: 1px solid var(--border-faint); } .tmux-badge-agent { background: rgba(245, 158, 11, .14); color: #fbbf24; border: 1px solid rgba(245, 158, 11, .3); } .tmux-badge-repo { color: #fff; font-weight: 600; font-size: 10.5px; } .tmux-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .btn-tmux-act { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 7px; font-size: 11.5px; font-weight: 500; border: 1px solid var(--border-faint); background: var(--bg-hover, rgba(128,128,128,.1)); color: var(--text-title); cursor: pointer; transition: all .15s ease; user-select: none; white-space: nowrap; /* CJK 可在字间折行: 防按钮被 flex 挤压成一字一行的竖条 */ flex: none; } .btn-tmux-act:hover { background: var(--bg-panel); border-color: var(--c-primary, #60a5fa); color: var(--c-primary, #60a5fa); } .btn-tmux-act.active { background: rgba(96, 165, 250, .14); border-color: rgba(96, 165, 250, .4); color: var(--c-primary, #60a5fa); } .tmux-meta-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-soft); margin-bottom: 12px; } .tmux-meta-item { display: inline-flex; align-items: center; gap: 4px; } .tmux-meta-item code { font-family: ui-monospace, Menlo, monospace; color: var(--text-body); } /* 标签 / 窗口切换条 */ .tmux-tabs-bar { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--border-faint); } .tmux-tab-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 7px; font-size: 12px; font-weight: 500; background: var(--bg-hover, rgba(128,128,128,.08)); border: 1px solid var(--border-faint); color: var(--text-soft); cursor: pointer; white-space: nowrap; transition: all .15s ease; } .tmux-tab-chip:hover { color: var(--text-title); border-color: var(--border-subtle); } .tmux-tab-chip.active { background: rgba(96, 165, 250, .12); border-color: rgba(96, 165, 250, .45); color: var(--c-primary, #60a5fa); font-weight: 600; } .tmux-tab-star { color: #38bdf8; font-weight: 700; } /* 窗格信息与命令 */ .tmux-pane-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 6px 2px; margin-bottom: 6px; } .tmux-pane-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tmux-cmd-badge { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 5px; background: rgba(96, 165, 250, .14); color: #93c5fd; border: 1px solid rgba(96, 165, 250, .25); } .tmux-cmd-badge.bun { background: rgba(244, 114, 182, .14); color: #f472b6; border-color: rgba(244, 114, 182, .25); } .tmux-cmd-badge.node { background: rgba(34, 197, 94, .14); color: #4ade80; border-color: rgba(34, 197, 94, .25); } .tmux-cmd-badge.zsh, .tmux-cmd-badge.bash { background: rgba(168, 85, 247, .14); color: #c084fc; border-color: rgba(168, 85, 247, .25); } .tmux-cmd-badge.agy, .tmux-cmd-badge.omp { background: rgba(245, 158, 11, .14); color: #fbbf24; border-color: rgba(245, 158, 11, .25); } .tmux-pane-title { font-size: 12px; color: var(--text-body); max-width: 450px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tmux-pane-meta { font-size: 11px; color: var(--text-ghost); } /* 终端画面实时预览 */ .tmux-term-preview { margin-top: 8px; border-radius: 9px; border: 1px solid var(--border-faint); background: #090c10; box-shadow: inset 0 2px 6px rgba(0,0,0,.4); overflow: hidden; } .tmux-term-topbar { display: flex; align-items: center; justify-content: space-between; padding: 5px 12px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.06); font-size: 11px; color: var(--text-soft); } .tmux-term-dots { display: flex; gap: 5px; } .tmux-term-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); } .tmux-term-pre { margin: 0; padding: 10px 14px; font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #c9d1d9; overflow-x: auto; white-space: pre; max-height: 260px; } /* 关联 Goal 提示条 */ .tmux-goal-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: rgba(245, 158, 11, .08); border: 1px solid rgba(245, 158, 11, .2); font-size: 12px; } .tmux-goal-banner-left { display: flex; align-items: center; gap: 6px; color: #fbbf24; } .tmux-goal-banner-obj { color: var(--text-body); } /* ========================================================================== Agent Hub (Agent 智能体中枢) ========================================================================== */ .agent-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .agent-header h2 { margin: 0; } .agent-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .btn-agent-top { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; border: 1px solid var(--border-faint); background: var(--bg-hover, rgba(128,128,128,.1)); color: var(--text-title); cursor: pointer; transition: all .15s ease; user-select: none; } .btn-agent-top:hover { background: var(--bg-panel); border-color: var(--c-primary, #60a5fa); color: var(--c-primary, #60a5fa); } .btn-agent-top.loading { opacity: .6; pointer-events: none; } a.btn-agent-top { text-decoration: none; } .btn-magpie-portal { background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.35); color: #c084fc; } .btn-magpie-portal:hover { background: rgba(168, 85, 247, 0.22); border-color: #a855f7; color: #e9d5ff; } .mp-portal-link { background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.35); color: #38bdf8; text-decoration: none; } .mp-portal-link:hover { background: rgba(56, 189, 248, 0.22); border-color: #38bdf8; color: #bae6fd; } /* Agent 子视图切换 */ .agent-subnav { display: flex; gap: 6px; margin: 4px 0 14px 0; padding: 4px; background: var(--bg-hover, rgba(128,128,128,.08)); border: 1px solid var(--border-faint); border-radius: 9px; width: fit-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .agent-subnav::-webkit-scrollbar { display: none; } .agent-subnav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--text-soft); background: transparent; border: none; border-radius: 7px; cursor: pointer; white-space: nowrap; flex: none; transition: all .15s ease; user-select: none; } .agent-subnav-btn:hover { color: var(--text-title); } .agent-subnav-btn.active { color: var(--chip-on-tx, #111); background: var(--chip-on-bg, #f2f2f2); box-shadow: 0 1px 3px rgba(0,0,0,.2); } /* Magpie 网关流量面板 */ .mp-period-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .mp-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mp-tool-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 11.5px; border-radius: 6px; border: 1px solid var(--border-faint); background: var(--bg-panel, rgba(0,0,0,.2)); color: var(--text-soft); cursor: pointer; transition: all .15s ease; user-select: none; } .mp-tool-btn:hover { color: var(--text-title); border-color: var(--border); } .mp-tool-btn.active { background: var(--bg-hover, rgba(255,255,255,.08)); color: var(--text-title); border-color: var(--border-faint); } .mp-period-fresh { font-size: 11px; color: var(--text-dim); } .mp-kpis { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; } .mp-kpi-sub { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 提供商额度与账号池可视化 */ .mp-quota-section { margin-bottom: 14px; } .mp-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .mp-section-header h4 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text-title); display: flex; align-items: center; gap: 6px; } .mp-quota-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 12px; } @media (max-width: 640px) { .mp-quota-grid { grid-template-columns: 1fr; } } .mp-quota-card { background: var(--bg-card, rgba(255,255,255,.025)); border: 1px solid var(--border-faint); border-radius: 10px; padding: 13px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; position: relative; transition: border-color .15s ease; } .mp-quota-card:hover { border-color: var(--border); } .mp-quota-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .mp-quota-provider { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text-title); } .mp-quota-provider .qpi { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; flex: none; } .mp-quota-provider .qpi img { width: 100%; height: 100%; object-fit: contain; } .mp-expand-btn { background: none; border: none; font-size: 11.5px; color: var(--text-soft); cursor: pointer; padding: 2px 7px; border-radius: 4px; transition: all .15s ease; } .mp-expand-btn:hover { color: var(--accent, #38bdf8); background: rgba(56, 189, 248, .1); } .mp-account-row { display: flex; flex-direction: column; gap: 7px; } .mp-acc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .mp-acc-email { font-size: 12px; color: var(--text-soft); font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; transition: filter .18s ease; } .mp-acc-email.is-masked { filter: blur(4.5px); user-select: none; } .mp-acc-email.is-masked:hover { filter: blur(0); } .mp-acc-plan { font-size: 10.5px; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,.06); color: var(--text-soft); border: 1px solid var(--border-faint); flex-shrink: 0; } .mp-win-container { display: flex; flex-wrap: wrap; gap: 10px; } .mp-win-col { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 4px; } @media (max-width: 640px) { /* 额度窗口窄屏单列: 两列时重置文案在 ~155px 列内折行(孤字"后"), 全宽更清楚 */ .mp-win-col { flex: 1 1 100%; } } .mp-win-top { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; } .mp-win-name { color: var(--text-dim); } .mp-win-val { font-weight: 600; color: var(--text-title); } .mp-win-val.warn { color: #f59e0b; } .mp-win-val.low { color: #ef4444; } .mp-win-track { width: 100%; height: 5px; background: rgba(125, 125, 125, 0.16); border-radius: 3px; overflow: hidden; } .mp-win-fill { height: 100%; background: #22c55e; border-radius: 3px; transition: width .25s ease, background-color .2s; } .mp-win-fill.low { background: #ef4444; } .mp-win-fill.warn { background: #f59e0b; } .mp-win-meta { font-size: 10.5px; color: var(--text-dim); line-height: 1.4; margin-top: 2px; } .mp-win-meta span { display: block; } .mp-daily-burn { font-size: 11px; color: var(--text-soft); display: flex; justify-content: space-between; align-items: center; padding-top: 4px; border-top: 1px dashed var(--border-faint); } .mp-balance-box { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 0; } .mp-balance-lbl { font-size: 12px; color: var(--text-soft); } .mp-balance-val { font-size: 20px; font-weight: 700; color: var(--text-title); letter-spacing: -.5px; } .mp-trend-stat { font-size: 11px; color: var(--text-dim); display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; } .mp-trend-dot { width: 6px; height: 6px; border-radius: 50%; background: #38bdf8; display: inline-block; margin-right: 4px; } .mp-reset-card-badge { font-size: 11px; color: #38bdf8; background: rgba(56, 189, 248, .08); border: 1px solid rgba(56, 189, 248, .2); padding: 4px 8px; border-radius: 6px; display: flex; align-items: center; gap: 5px; margin-top: 4px; } .mp-secondary-accounts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; border-top: 1px dashed var(--border-faint); padding-top: 8px; } .mp-acc-error { font-size: 11.5px; color: var(--text-dim); font-style: italic; padding: 6px 0; } .mp-sparkline-svg { width: 100%; height: 28px; margin-top: 3px; overflow: visible; } .mp-chart-card { background: var(--bg-card, rgba(255,255,255,.025)); border: 1px solid var(--border-faint); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; } .mp-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .mp-card-header h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-title); display: flex; align-items: center; gap: 6px; } .mp-chart-sub { font-size: 12px; color: var(--text-soft); } .mp-timeline-chart { display: flex; align-items: flex-end; gap: 4px; height: 90px; padding-top: 10px; position: relative; overflow-x: auto; scrollbar-width: none; } .mp-timeline-chart::-webkit-scrollbar { display: none; } .mp-bar-col { flex: 1; min-width: 14px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; position: relative; cursor: pointer; } .mp-bar-fill { width: 100%; max-width: 18px; background: var(--ch-cpu, #6ea8dc); border-radius: 3px 3px 1px 1px; transition: height .25s ease, background-color .15s ease; min-height: 2px; } .mp-bar-col:hover .mp-bar-fill { background: var(--accent, #0a84ff); box-shadow: 0 0 8px rgba(10,132,255,.5); } .mp-bar-label { font-size: 9px; color: var(--text-dim); font-family: monospace; } .mp-grid-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } @media (max-width: 768px) { .mp-grid-columns { grid-template-columns: 1fr; } } .mp-column-card { background: var(--bg-card, rgba(255,255,255,.025)); border: 1px solid var(--border-faint); border-radius: 10px; padding: 14px 16px; min-width: 0; } .mp-list { display: flex; flex-direction: column; gap: 8px; } .mp-item { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; background: var(--bg-panel, rgba(0,0,0,.2)); border: 1px solid var(--border-faint); border-radius: 7px; transition: border-color .15s; } .mp-item:hover { border-color: var(--border); } .mp-item-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .mp-item-name { font-size: 13px; font-weight: 600; color: var(--text-title); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .mp-item-stats { font-size: 12px; color: var(--text-soft); display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .mp-track { width: 100%; height: 4px; background: rgba(128,128,128,.15); border-radius: 2px; overflow: hidden; } .mp-track-fill { height: 100%; background: var(--ch-cpu, #6ea8dc); border-radius: 2px; transition: width .25s ease; } .mp-accounts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; } .mp-account-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .mp-account-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .mp-account-name { font-size: 13px; font-weight: 600; color: var(--text-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mp-account-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--tbadge-rd-bg); color: var(--tbadge-rd-tx); border: 1px solid var(--tbadge-rd-bd); text-transform: uppercase; } .mp-account-meta { font-size: 11px; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 8px; } .mp-account-quota { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--border-faint); font-size: 11px; color: var(--c-green); display: flex; align-items: center; justify-content: space-between; } #agent-view-routing { --card: var(--bg-panel, #131313); --card-2: var(--bg-hover, #1f1f1f); --pill: var(--bg-hover, #222); --pill-hover: var(--bg-active, #2a2a2a); --line: var(--border, #262626); --line-2: var(--border-soft, #1f1f1f); --fg: var(--text-title, #f2f2f2); --fg-2: var(--text, #d6d6d6); --muted: var(--text-dim, #909090); --faint: var(--text-ghost, #777); --accent: var(--accent, #0a84ff); --accent-soft: rgba(10, 132, 255, 0.15); --green: var(--c-green, #6ec89a); --green-soft: rgba(110, 200, 154, 0.15); --red: var(--c-red, #e06c6c); --red-soft: rgba(224, 108, 108, 0.15); --amber: var(--c-warn, #f0b662); --amber-soft: rgba(240, 182, 98, 0.15); --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; --code: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --c1: #a5b4fc; --c2: #818cf8; --c3: #38bdf8; --c4: #f59e0b; --c5: #f43f5e; --c6: #a855f7; --c7: #10b981; --k-system: var(--c6); --k-tools: var(--c2); --k-memory: var(--c4); --k-files: var(--c3); --k-results: var(--c5); --k-chat: var(--c1); --k-free: rgba(128, 128, 128, 0.12); } .rt-head-bar { display: flex; align-items: center; gap: 8px; margin: 12px 0 10px; padding: 0 4px; } .rt-head-bar .label { font-size: 13.5px; font-weight: 600; color: var(--text-title); } .rt-head-bar .note { font-size: 11.5px; color: var(--text-dim); } .rt-head-bar .grow { flex: 1; } .rt-mask { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: var(--bg-hover, rgba(255, 255, 255, 0.05)); border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.08)); color: var(--text-soft); font-size: 11.5px; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .rt-mask:hover { background: var(--bg-active, rgba(255, 255, 255, 0.1)); color: var(--text-title); } /* Magpie Native Routing & Context Window Styles */ .rt { margin: 0 0 16px; } .rt-top { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; } .rt-what { font-size: 13px; color: var(--muted); line-height: 1.4; } .rt-what b { color: var(--fg); font-weight: 600; } .rt-mode { margin: 0; font-size: 12px; color: var(--fg-2); line-height: 1.45; } .rt-stage { position: relative; display: grid; grid-template-columns: 120px 120px minmax(0, 1fr); column-gap: 52px; align-items: start; padding: 18px 2px; } .rt-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .rt-wires path { fill: none; stroke: var(--line); stroke-width: 1.5; transition: opacity .3s; } .rt-wires path.live { stroke: var(--agent, var(--muted)); stroke-dasharray: 3 5; animation: rtflow .7s linear infinite; } .rt-wires path.lit { stroke: var(--agent, var(--muted)); } .rt-wires path.rest { stroke-dasharray: 2 6; opacity: .45; } @keyframes rtflow { to { stroke-dashoffset: -8; } } .rt-sky { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .rt-sky .pkt { fill: var(--agent, var(--fg)); filter: drop-shadow(0 0 3px var(--agent, var(--muted))); } .rt-sky .pkt.back { fill: var(--card); stroke: var(--agent, var(--fg)); stroke-width: 2.25; } .rt-sky .pkt.back.err { fill: var(--agent, var(--card)); stroke: var(--red); } .rt-sky path.via { fill: none; stroke: none; } .rt-sky .pkt.held { animation: rtheld 1.2s ease-in-out infinite; } @keyframes rtheld { 50% { opacity: .45; } } .rt-flier { color: var(--fg); } .rt-flier .body, .rt-flier .tail, .rt-flier .wing path:first-child, .rt-flier .wing.far { fill: currentColor; } .rt-flier .wing.far { opacity: .45; } .rt-flier .belly { fill: var(--card); } .rt-flier .wing .bar { fill: none; stroke: var(--card); stroke-width: 1.3; stroke-linecap: round; } .rt-flier .wing { transform-box: fill-box; transform-origin: 50% 100%; animation: rtflap .42s cubic-bezier(.45, 0, .3, 1) infinite; } .rt-flier .wing.far { animation-delay: -.03s; } @keyframes rtflap { 0%, 100% { transform: scaleY(1); } 55% { transform: scaleY(-.62) skewX(-8deg); } } .rt-flier .rt-lift { animation: rtcome .3s ease-out; transition: transform .45s cubic-bezier(.3, 0, .2, 1), opacity .45s; } .rt-flier.away .rt-lift { transform: translate(14px, -16px) scale(.8); opacity: 0; } @keyframes rtcome { from { transform: translate(-6px, -10px) scale(.85); opacity: 0; } } .rt-srcs { align-self: start; z-index: 1; min-width: 0; display: grid; gap: 10px; } .rt-srcs.many .rt-node { padding: 8px 8px 7px; } .rt-src b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 5px 1px 0; border-radius: 50%; background: var(--agent); vertical-align: middle; } .rt-node { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 8px 9px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; text-align: center; box-sizing: border-box; } .rt-node .rt-ic { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); margin-bottom: 3px; overflow: hidden; flex: none; } .rt-node .rt-ic .ic, .rt-node .rt-ic img, .rt-node .rt-ic svg { width: 18px; height: 18px; object-fit: contain; display: block; } .rt-node .rt-bird { width: 22px; height: 22px; margin-bottom: 3px; object-fit: contain; display: block; } .rt-node b { font-size: 12.5px; font-weight: 600; color: var(--fg); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-node small { font-size: 10.5px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-hub { align-self: start; border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.24); } .rt-hub i { font-style: normal; font-size: 10px; font-weight: 560; margin-top: 4px; padding: 1px 7px; border-radius: 999px; background: var(--pill); border: 1px solid var(--line); color: var(--fg); } .rt-hub.tick, .rt-src.tick { animation: rttick .4s ease-out; } @keyframes rttick { 40% { transform: scale(1.04); } } .rt-accts { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; min-width: 0; } .rt-accts li { position: relative; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 5px; padding: 7px 2px; font-size: 12.5px; transition: opacity .3s, background-color .2s; } .rt-accts li { margin-left: calc(var(--depth, 0) * 16px); } /* a group in the group: a heading its models hang from, set in under it */ .rt-accts li.rt-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 8px 2px 4px; font-size: 11.5px; color: var(--muted); } .rt-accts li.rt-sub b { font-size: 12px; font-weight: 600; color: var(--fg); flex: none; } .rt-accts li.rt-sub.on { color: var(--fg); } .rt-accts li.rt-sub svg { flex: none; } .rt-accts li.rt-sub .ic { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; } .rt-accts li.rt-sub .ic img, .rt-accts li.rt-sub .ic svg { width: 15px; height: 15px; object-fit: contain; display: block; } .rt-accts li.rt-sub code.mdl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--code); font-size: 10.5px; padding: 1px 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.05); color: var(--fg-2); } .rt-accts li.rt-sub i { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 560; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-2); white-space: nowrap; } .rt-accts li.idle { display: block; color: var(--muted); text-align: center; } .rt-accts b { font-weight: 560; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; min-width: 0; } .rt-accts b > span:not(.ic) { font-weight: 450; color: var(--muted); } .rt-accts b > span.who { color: var(--fg); font-weight: 560; font-size: 12.5px; } .rt-accts b .ic { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 6px; flex: none; } .rt-accts b .ic img, .rt-accts b .ic svg { width: 15px; height: 15px; object-fit: contain; display: block; } .rt-accts b .fb { margin-left: 6px; font-size: 10px; font-weight: 560; padding: 0 5px; border-radius: 999px; border: 1px solid var(--line); color: var(--amber); background: var(--amber-soft); } .rt-accts b code.mdl, .rt-req code, .rt-act code.mdl { font: 500 11px/1.5 var(--code); color: var(--fg-2); background: var(--card-2); border-radius: 4px; padding: 0 5px; } .rt-accts b code.mdl { margin-left: 6px; font-weight: 450; } .rt-accts em { font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .rt-accts .bar { grid-column: 2 / 4; height: 3px; border-radius: 2px; background: var(--card-2); overflow: hidden; } .rt-accts .bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--muted); transition: width .4s; } .rt-accts li.nobar .bar { display: none; } .rt-accts .dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; } .rt-accts li.on { background: var(--card-2); } /* 中性选中底, 不再铺绿色阴影 */ .rt-accts li.on em { color: var(--green); font-weight: 500; } .rt-accts li.on .bar i { background: var(--green); } .rt-accts li.on .dot { background: var(--green); border-color: var(--green); } .rt-accts li.now .dot { animation: rtlive 1.8s infinite; } @keyframes rtlive { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 40%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } } .rt-accts li.low em { color: var(--fg-2); } .rt-accts li.rest { opacity: .55; } .rt-accts li.rest em { color: var(--red); opacity: .9; } @keyframes rtlive { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fg) 40%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } } .rt-accts li.low em { color: var(--fg-2); } .rt-accts li.rest { opacity: .55; } .rt-accts li.rest > :not(.tag) { opacity: .5; } .rt-accts li.rest em { color: var(--red); opacity: .85; } .rt-accts li.left > :not(.tag) { opacity: .45; } .rt-accts li.hit { animation: rthit .45s; } .rt-accts li.new { animation: rtin .4s ease-out; } @keyframes rthit { 20% { translate: -5px; } 40% { translate: 4px; } 60% { translate: -2px; } 80% { translate: 1px; } } .rt-accts .tag { position: absolute; right: 10px; top: -10px; padding: 1px 7px; border-radius: 6px; background: var(--red); color: #fff; font: var(--code-style, normal) 600 10.5px/1.5 var(--code-font, var(--code)); font-stretch: var(--code-stretch, 100%); opacity: 0; transform: translateY(4px) scale(.9); transition: opacity .25s, transform .25s; pointer-events: none; } .rt-accts li.tagged .tag { opacity: 1; transform: none; } /* a provider's keys for one model, folded into one row (#1319): it opens to head them, as a group in the group heads its models */ .rt-accts li.rt-fold { grid-template-columns: 10px minmax(0, 1fr) auto auto; cursor: pointer; user-select: none; } .rt-accts li.rt-fold em { white-space: normal; text-align: right; } .rt-accts li.rt-fold .chev { display: inline-flex; color: var(--muted); transition: transform .2s; } .rt-accts li.rt-fold:hover .chev { color: var(--fg); } .rt-accts li.rt-fold.open { background: var(--card-2); } .rt-accts li.rt-fold.open .chev { transform: rotate(180deg); } .rt-accts li.rt-fold:focus { outline: none; } .rt-accts li.rt-fold:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } .rt-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); } .rt-cap { flex: 1 1 20em; margin: 0; min-height: 3em; display: flex; align-items: center; font-size: 13px; line-height: 1.45; color: var(--fg); } .rt-cap.in { animation: rtin .4s ease-out; } @keyframes rtin { from { opacity: 0; transform: translateY(4px); } } .rt-stats { display: flex; gap: 18px; font-size: 11px; color: var(--muted); } .rt-stats > span { display: flex; flex-direction: column; } .rt-stats b { font-size: 19px; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; color: var(--fg); font-variant-numeric: tabular-nums; } .rt-log { padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line); } .rt-log-head { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; font-size: 12px; font-weight: 600; color: var(--fg); } .rt-log-head .grow { flex: 1; } /* a request's request and response, opened from the story's head */ .rt-bodies { margin-top: 8px; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: var(--card); } .rt-bodies[hidden] { display: none; } .rt-bodies > .call-details { border-top: 0; } .rt-bodies > .call-archive { border: 0; } .rt-bodies > .none, .rt-bodies-gone { margin: 0; padding: 10px 12px; font-size: 11.5px; font-weight: 400; color: var(--muted); } .rt-bodies > .call-archive-err { padding: 10px 12px 4px; } .rt-bodies > .call-archive-err + button.text { margin: 0 12px 10px; } .rt-steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; align-content: start; gap: 5px; counter-reset: rt; } .rt-steps li { position: relative; padding-left: 20px; font-size: 12.5px; line-height: 1.45; color: var(--fg-2); } .rt-steps li::before { content: ""; position: absolute; left: 5px; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); } .rt-steps li.why { color: var(--fg); } .rt-steps li.why::before { background: var(--fg); } .rt-steps li.aside { color: var(--muted); } .rt-steps li.said { font-family: var(--code-font, var(--code)); font-size: 11.5px; overflow-wrap: anywhere; white-space: pre-wrap; } :where(html[data-fonts]) .rt-steps li.said { font-style: var(--code-style, inherit); font-weight: var(--code-weight, inherit); font-stretch: var(--code-stretch, 100%); } .rt-stats > span.rt-errs:not([aria-disabled="true"]) { cursor: pointer; } .rt-stats > span.rt-errs:not([aria-disabled="true"]):hover b { color: var(--red); } .rt-steps li.aside::before { background: none; border: 1px solid var(--muted); width: 4px; height: 4px; } .rt-steps li.ok::before { background: var(--green); } .rt-steps li.bad::before { background: var(--red); } .rt-steps li.wait::before { animation: rtlive 1.8s infinite; } /* where a try's time went: one stacked bar, magpie's, the network's and the vendor's told apart by a swatch, each part named with its time */ .rt-time { display: grid; gap: 5px; max-width: 560px; } .rt-time-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--fg-2); } .rt-time-who { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; } .rt-time-who::before, .rt-time-parts li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--rt-time); } .rt-time-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--line); gap: 1px; } .rt-time-bar span { min-width: 2px; background: var(--rt-time); } .rt-time-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; } .rt-time-parts li { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; } .rt-time-parts .v { color: var(--fg-2); font-variant-numeric: tabular-nums; } .rt-time .magpie { --rt-time: var(--accent); } .rt-time .net { --rt-time: var(--amber); } .rt-time .vendor { --rt-time: var(--fg-2); } .rt-off { padding: 18px 4px; text-align: center; color: var(--muted); font-size: 13px; } @media (prefers-reduced-motion: reduce) { .rt-accts li.now .dot, .rt-wires path.live, .rt-sky .pkt.held, .rt-accts li.new, .rt-accts li.hit, .rt-hub.tick, .rt-src.tick, .rt-cap.in, .rt-steps li.wait::before, .masking .pii { animation: none; } .rt-accts li { transition: none; } } /* The narrow and wide layouts below go by a box's own width, as container queries would: client.js sets max560 on a box 560px wide or less, min1150 on one 1150px or wider. Not container queries: in WebKit they kept the page from scrolling to its end (#1249). :where() keeps each rule as strong as it was inside its query. */ /* a narrow list: what a row says goes under its name */ .rt-accts:where(.max460) li { grid-template-columns: 10px minmax(0, 1fr); } .rt-accts:where(.max460) em { grid-column: 2; white-space: normal; } .rt-accts:where(.max460) .bar { grid-column: 2; } .rt-accts:where(.max460) li.rt-fold { grid-template-columns: 10px minmax(0, 1fr) auto; } .rt-accts:where(.max460) li.rt-fold em { grid-row: 2; text-align: left; } .rt-accts:where(.max460) li.rt-fold .chev { grid-column: 3; grid-row: 1; } /* narrow: magpie and the agent side by side, the accounts under them */ @media (max-width: 768px) { .rt-stage { grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 18px; padding: 14px 0; } .rt-accts { grid-column: 1 / -1; padding-left: 0; } /* 账号列表限高内滚: 路由地图保持一屏可视, 不拖长整页 */ .rt-accts { max-height: min(480px, calc(100dvh - 400px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--chip-border, rgba(128,128,128,.3)) transparent; } .rt-accts::-webkit-scrollbar { width: 4px; } .rt-accts::-webkit-scrollbar-thumb { background: var(--chip-border, rgba(128,128,128,.3)); border-radius: 2px; } /* 未滚到底时底部渐隐, 提示还有内容(滚到底自动消失) */ .rt-accts.rt-fade-b { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%); } .rt-accts li { grid-template-columns: 8px minmax(0, 1fr); padding: 8px 10px; } .rt-accts em { grid-column: 2; white-space: normal; } .rt-accts .bar { grid-column: 2; } .rt-stats { gap: 14px; } .ctx-waffle { grid-template-columns: repeat(20, 1fr) !important; } } @media (max-width: 640px) { .rt-head-bar .note { display: none; } .rt-head-bar .label { font-size: 13px; } .rt-head-bar .rt-mask { padding: 3px 7px; font-size: 11px; } } :where(.rt.max560) .rt-stage { grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 26px; padding: 16px 0; } :where(.rt.max560) .rt-accts { grid-column: 1 / -1; padding-left: 0; } .rt-accts:where(.max560) li { grid-template-columns: 10px minmax(0, 1fr); } .rt-accts:where(.max560) em { grid-column: 2; white-space: normal; } .rt-accts:where(.max560) .bar { grid-column: 2; } :where(.rt.max560) .rt-stats { gap: 14px; } /* the Routing view */ #agent-view-routing .row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 16px 0 8px; padding: 0 2px; min-height: 26px; } #agent-view-routing .row-head .label { font-size: 13px; font-weight: 600; color: var(--fg); letter-spacing: .01em; } #agent-view-routing .row-head .note { font-size: 11px; color: var(--faint); } /* 标题行右侧的小页签（Live / Today N / By Request）: 与全站 chips 同语言 */ .rt-tab-btn { font-size: 11px; font-weight: 500; line-height: 1.5; padding: 3px 10px; border-radius: 999px; color: var(--muted); cursor: pointer; user-select: none; transition: background .15s ease, color .15s ease; } .rt-tab-btn:hover { color: var(--fg-2); background: var(--card-2); } .rt-tab-btn.on { color: var(--fg); background: var(--card-2); font-weight: 600; } @media (max-width: 480px) { #agent-view-routing .row-head .note { flex: 1 1 100%; order: 1; margin-top: 2px; } } .rt-mask, .rt-newgroup { display: inline-flex; align-items: center; gap: 5px; } .rt-mask svg, .rt-newgroup svg { width: 13px; height: 13px; flex: none; } /* the routing groups' New group, at the top too: the groups sit below the requests, out of sight on a first look (#944) */ .rt-newgroup { margin-right: 6px; } .rt-gnew { display: inline-flex; align-items: center; gap: 4px; } /* on, it says so in its struck eye and its words, a shade darker: a page tool, not a banner */ .rt-mask[aria-pressed="true"] { color: var(--fg-2); } /* an email, hidden: stand-in letters of its shape, softly blurred — coming in out of focus when asked for */ .pii { filter: blur(2.2px); opacity: .5; user-select: none; } .masking .pii { animation: rtpii .35s ease-out backwards; } @keyframes rtpii { from { filter: blur(0); opacity: 1; } } /* 静态快照中的脱敏占位符: 打码, 不可取消 */ .redact-mosaic { filter: blur(2.2px); opacity: .5; user-select: none; -webkit-user-select: none; } #agent-view-routing .rt { margin: 0; } .rt-more { padding-bottom: 12px; } .rt-cols { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; } /* side by side, the accounts end where the requests do and scroll like them, not run on down the page beside an empty column: of no height of their own, they take what the requests give the row, and no less than a few accounts'. Only where the requests' column still keeps each request on one line (wider than 760px, see below): narrower, one column of one-line requests reads better than two with each request on three (#860, huoranxuanyuan). Where the page is 1150px wide or more. Kept to 28%, no more than 360px: in a page kept to 1200px the accounts had room to spare while the requests' models were cut (#1926, hibaliqya-yonma) */ :where(.rt-more.min1150) .rt-cols { grid-template-columns: minmax(0, 1fr) clamp(260px, 28%, 360px); } :where(.rt-more.min1150) .rt-cols:not(.solo) .rt-col:last-child { display: flex; flex-direction: column; } :where(.rt-more.min1150) .rt-cols:not(.solo) .rt-acts { flex: 1 1 auto; height: 0; min-height: 216px; overflow-y: auto; overscroll-behavior: contain; } /* each column sized by its own width: a request's row lays itself out by the list's width, not the page's (#273: in two columns of ~470px the rows kept to one line, and the reasoning was drawn over the numbers) */ .rt-col { min-width: 0; } /* the model that answered keeps room of its own (at least 14em, or 30% of a narrower list) and the metrics wrap in theirs, up to 40%: an auto column took the widest row's metrics for every row, and the model went to "· hi…" (#1926, hibaliqya-yonma) */ .rt-reqs { padding: 4px; max-height: 420px; overflow-y: auto; display: grid; grid-template-columns: auto fit-content(32%) minmax(min(14em, 30%), 1fr) fit-content(40%); row-gap: 2px; } .rt-req { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; column-gap: 12px; padding: 6px 8px; font: inherit; font-size: 12px; text-align: left; color: var(--fg-2); background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer; } .rt-req:hover { background: var(--card-2); } .rt-req[aria-pressed="true"] { background: var(--card-2); border-color: var(--line); color: var(--fg); } .rt-req .at { font-variant-numeric: tabular-nums; color: var(--muted); } .rt-req .asked { display: flex; align-items: center; gap: 6px; min-width: 0; } .rt-req .asked i.ag { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--agent); } .rt-req .asked .ic, .rt-req .asked .ic img, .rt-req .asked .ic svg { width: 14px; height: 14px; flex: none; } .rt-req .m, .rt-req .to span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-req .to { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: var(--fg); } .rt-req .to .said { flex-shrink: 100000; min-width: min(9em, 60%); } .rt-req .to .said.split { display: flex; } .rt-req .to .said .who { flex: 0 1000 auto; min-width: 2.5em; } .rt-req .to .said .mdl { flex: none; max-width: calc(100% - 2.5em); white-space: pre; } /* on a phone the account keeps a few letters, not a sliver of one (40px, where phone-rows.test.cjs calls a text cut to a sliver) */ @media (max-width: 600px) { .rt-req .to .said .who { min-width: 40px; } .rt-req .to .said .mdl { max-width: calc(100% - 40px); } } .rt-req .to i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--green); } .rt-req.moved .to i { background: var(--accent); } .rt-req.bad .to { color: var(--red); } .rt-req.bad .to i { background: var(--red); } .rt-req.wait .to i { background: var(--muted); animation: rtlive 1.8s infinite; } /* the reasoning keeps to its own box: what it was asked at is cut first, then what it was sent at, never drawn over the numbers beside it (#435) */ .rt-req .to .ef { flex: 0 1 auto; display: flex; min-width: 0; margin-left: -2px; color: var(--muted); } .rt-req .ef::before { content: "· "; flex: none; white-space: pre; } .rt-req .to .ef span { min-width: 0; white-space: pre; } .rt-req .to .ef .was { flex-shrink: 100000; } .rt-req .to .ef.picked { color: var(--fg-2); } .rt-req .ef .was { opacity: .75; } /* what a call was for (a Codex guardian review, a title…): a quiet grey tag by the model */ .rt-req .asked .kind, .rp-req .kind, .rt-steps li .kind { flex: none; font-size: 10.5px; line-height: 16px; padding: 0 5px; border-radius: 5px; color: var(--muted); background: var(--card-2); border: 1px solid var(--line); white-space: nowrap; } .rt-steps li .kind { display: inline-block; vertical-align: 1px; } .rt-steps li .rt-named { white-space: nowrap; } .rt-steps li .rt-named > .ic { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; } /* in a narrow row the model keeps its room first: the tag gives way, to an ellipsis */ .rt-req .asked .kind { flex: 0 100 auto; min-width: 3.2em; max-width: 9em; overflow: hidden; text-overflow: ellipsis; } .rt-req .asked.kinded .m { flex: none; max-width: calc(100% - 3.2em - 40px); } .rt-req .to .swap, .rt-steps li .swap { font-size: 10.5px; line-height: 16px; padding: 0 5px; border-radius: 5px; color: var(--amber); background: var(--amber-soft); white-space: nowrap; } .rt-req .to .swap { flex: none; max-width: 70%; } .rt-req .to .routed, .pr-to .routed { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; line-height: 16px; color: var(--muted); white-space: nowrap; } .rt-steps li.swap::before { background: var(--amber); } /* short of room, where it went gives way down to the provider's name, then this does (.upstreamed, set with the tag: Safari before 15.4 has no :has()) */ .rt-req .to.upstreamed .said { min-width: min(10em, 45%); } .rt-req .to .upstream, .pr-to .upstream { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; line-height: 16px; color: var(--muted); white-space: nowrap; } .rt-req .meta { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 2px 0; color: var(--muted); font-variant-numeric: tabular-nums; } .rt-metric { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; min-width: 0; } .rt-metric .k { color: var(--muted); } .rt-metric .v { font-variant-numeric: tabular-nums; } .rt-req .tokens, .rt-session .rt-token-total { cursor: help; } .rt-req .meta .retry-count { white-space: nowrap; } .rt-req .meta > * + .rt-metric::before { content: "·"; margin: 0 2px; } .rt-req .meta .cost-metric { margin-left: 10px; color: var(--fg-2); } .rt-req .meta .cost-metric::before { display: none; } .rt-req .meta[hidden] { display: none; } .rt-session { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; padding: 9px 8px; margin-top: 4px; font: inherit; font-size: 12px; text-align: left; color: var(--fg-2); background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; } button.rt-session { cursor: pointer; } .rt-session .arrow { flex: none; width: 10px; color: var(--muted); } .rt-session .nm { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .rt-session .summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); font-variant-numeric: tabular-nums; } .rt-session > .cost { flex: none; margin-left: auto; font-variant-numeric: tabular-nums; } .rt-session > .cost[hidden] { display: none; } .rt-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } .rt-filters > .rt-days { flex: 1; min-width: 0; } .rt-group-by { flex: none; } /* Purpose is a list tool in its heading; the bar below chooses day and view. */ .rt-purpose-tools { flex: none; display: inline-flex; align-items: center; margin-left: 8px; border-radius: 6px; } .rt-purpose-tools.set { background: var(--pill); } .rt-purpose { display: inline-flex; align-items: center; gap: 3px; max-width: 180px; height: 24px; } .rt-purpose span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-purpose svg { flex: none; opacity: .7; transition: transform .15s var(--ease); } .rt-purpose.open svg { transform: rotate(180deg); } .rt-metric-pick { display: inline-flex; align-items: center; gap: 3px; height: 24px; margin-left: 6px; } .rt-metric-pick.open svg { transform: rotate(180deg); } .pop.proto-menu.rt-metric-menu { width: 190px; max-width: calc(100vw - 16px); background: var(--card); } .rt-metric-menu .pm-item { align-items: center; } .rt-metric-menu .pm-tick { height: 13px; width: 13px; border: 1px solid var(--line); border-radius: 3px; } .rt-metric-menu .on .pm-tick { border-color: var(--muted); } .rt-metric-menu .pm-note { display: none; } .rt-purpose-tools.set .rt-purpose { color: var(--fg-2); } .rt-purpose-clear { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 24px; padding: 0; } .pop.proto-menu.rt-purpose-menu { width: 190px; max-width: calc(100vw - 16px); background: var(--card); } .rt-purpose-menu .pm-head, .rt-purpose-menu .pm-note { display: none; } .rt-purpose-menu .pm-item { align-items: center; padding: 7px 8px; } .rt-purpose-menu .pm-tick { height: 13px; width: 13px; border: 1px solid var(--line); border-radius: 3px; } .rt-purpose-menu .on .pm-tick { border-color: var(--muted); } .rt-purpose-menu .pm-name { font-weight: 400; overflow-wrap: anywhere; } :where(.rt-col.max440) .rt-purpose { max-width: 150px; } /* Keep the compact row on wide lists. In a narrow column the destination and the metrics go under the model; individual metrics stay whole. */ /* Where a request's numbers don't fit their column on one line (set by metaFit), they go on a line of their own under where it went, which keeps its room (#2288, xishuchkui-code). */ :where(.rt-col.meta-under:not(.max760)) .rt-reqs { grid-template-columns: auto fit-content(45%) minmax(0, 1fr); } :where(.rt-col.meta-under:not(.max760)) .rt-req { row-gap: 2px; } :where(.rt-col.meta-under:not(.max760)) .rt-req .meta { grid-column: 2 / -1; grid-row: 2; justify-content: flex-start; } :where(.rt-col.max760) .rt-reqs { grid-template-columns: auto minmax(0, 1fr); } :where(.rt-col.max760) .rt-req { row-gap: 2px; } :where(.rt-col.max760) .rt-req .asked { grid-column: 2; grid-row: 1; } :where(.rt-col.max760) .rt-req .to { grid-column: 2; grid-row: 2; } :where(.rt-col.max760) .rt-req .meta { grid-column: 2; grid-row: 3; justify-content: flex-start; } .rt-acts { padding: 4px 0; } .rt-cols.solo { grid-template-columns: minmax(0, 1fr); } .rt-reqs.none { display: block; background: none; border-color: transparent; } .rt-reqs.none .empty-state { padding: 14px 12px 18px; font-size: 12px; line-height: 1.6; } .rt-reqs.none .empty-state b { font-size: 13px; } .rt-prov { display: flex; align-items: center; gap: 7px; padding: 8px 12px 4px; font-size: 12px; } .rt-prov .ic, .rt-prov .ic img, .rt-prov .ic svg { width: 14px; height: 14px; } .rt-prov > span:last-child { margin-left: auto; font-size: 10.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; } .rt-prov:not(:first-child) { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; } /* a routing named where it can be changed: a way to where it is set */ .rt-go { cursor: pointer; } .rt-go::after { content: " ›"; } /* :focus-visible in rules of its own: Safari before 15.4 drops a list holding it whole, hover included */ .rt-prov > span.rt-go:hover { color: var(--fg); border-color: var(--fg); } .rt-prov > span.rt-go:focus-visible { color: var(--fg); border-color: var(--fg); } .rt-hub i.rt-go:hover { box-shadow: 0 0 0 3px var(--card-2), 0 0 0 4px var(--fg); } .rt-hub i.rt-go:focus-visible { box-shadow: 0 0 0 3px var(--card-2), 0 0 0 4px var(--fg); } .rt-go:focus-visible { outline: none; } .rt-found { animation: rtfound 1.4s ease-out; } @keyframes rtfound { 0%, 40% { box-shadow: inset 0 0 0 2px var(--fg); } 100% { box-shadow: inset 0 0 0 2px transparent; } } @media (prefers-reduced-motion: reduce) { .rt-found { animation: none; } } .rt-act { display: grid; gap: 3px; padding: 6px 12px 6px 33px; font-size: 12px; } .rt-act .nm { display: flex; gap: 6px; min-width: 0; } .rt-act .nm b { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-act .nm span { color: var(--muted); white-space: nowrap; } .rt-act .st { color: var(--fg-2); } .rt-act .st:empty { display: none; } .rt-act .st.rest { color: var(--red); } .rt-act .st.left { color: var(--muted); } /* the accounts' allowances read again by hand (#1834), beside the heading */ .rt-read { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; margin: -3px 0 -3px 6px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; transition: background .12s, color .12s; } .rt-read[hidden] { display: none; } .rt-read:hover { color: var(--fg); background: var(--pill-hover); } .rt-read:focus-visible { color: var(--fg); background: var(--pill-hover); outline: none; } .rt-read svg { flex: none; } .rt-read.busy { cursor: default; color: var(--fg-2); } .rt-read.busy svg > * { transform-box: view-box; transform-origin: 50% 50%; animation: spin .8s linear infinite; } @media (prefers-reduced-motion: reduce) { .rt-read.busy svg > * { animation: none; } } /* a subscription account's windows each (#1833), under its one figure */ .rt-act .wins { display: flex; flex-wrap: wrap; gap: 2px 12px; min-width: 0; color: var(--fg-2); font-size: 11px; font-variant-numeric: tabular-nums; } .rt-act .wins span { min-width: 0; overflow-wrap: anywhere; } .rt-act .tally { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; } .rt-act .tally .bad { color: var(--red); } .rt-act .mdls { display: flex; flex-wrap: wrap; gap: 4px; } .rt-act .mdls code { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-act .fix { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11px; } .rt-act .bar { height: 3px; border-radius: 2px; background: var(--card-2); overflow: hidden; } .rt-act .bar i { display: block; height: 100%; border-radius: 2px; background: var(--muted); } /* a provider's keys summed up in one row (#1319), opened to each */ .rt-act.rt-keys { cursor: pointer; user-select: none; } .rt-act.rt-keys .chev { display: inline-flex; align-self: center; margin-left: auto; color: var(--muted); transition: transform .2s; } .rt-act.rt-keys:hover .chev { color: var(--fg); } .rt-act.rt-keys.open .chev { transform: rotate(180deg); } .rt-act.rt-keys:focus { outline: none; } .rt-act.rt-keys:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); } .rt-livedot { width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: var(--green); animation: rtlive 1.8s infinite; --fg: var(--green); } @media (prefers-reduced-motion: reduce) { .rt-livedot { animation: none; } } /* routing groups, and the providers routing over several of their own */ .rt-gsec { display: grid; gap: 6px; margin-top: 16px; } .rt-gsec .row-head .note { margin-right: 6px; } /* the groups filtered by name and model, beside Select and New group */ .rt-gsec .rt-gfilter { width: 190px; min-width: 0; flex: 0 1 190px; height: 24px; margin: 0 6px 0 4px; } .rt-gsec .rt-pools { margin-bottom: 0; } .rt-gsec .row-head + .list + .row-head { margin-top: 8px; } .rt-groups > *, .rt-pools > * { border-top: 1px solid var(--line-2); } .rt-groups > :first-child, .rt-pools > :first-child { border-top: 0; } .rt-group { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; cursor: pointer; transition: background .12s; } .rt-group:hover { background: var(--card-2); } .rt-group.off { opacity: .6; } /* switched off as a whole: dimmed but for its switch, which brings it back */ .rt-group.disabled > :not(.rt-gon) { opacity: .5; } .rt-group .rt-gon { flex: none; transform: scale(.85); } .rt-group .ics { display: flex; gap: 3px; flex: none; min-width: 18px; } .rt-group .ics .ic { width: 16px; height: 16px; } /* a group's logos are its handle (#779), as an agent row's logo is: the grip in the row's left margin is drawn only while the row is under the pointer, dragged, or its handle has the keyboard or its menu open — always there it is clutter, as on the Agents page. .ag-handle is in the selector so it outweighs body.window .ag-handle, whose 28px held a stack of logos in, spilling it over the card's left edge onto the name (ARNO on Discord) */ .rt-group .rt-ghandle.ag-handle { position: relative; align-items: center; justify-content: center; width: auto; min-width: 24px; height: 24px; padding: 0 3px; } .rt-group .rt-ghandle::before { content: ""; position: absolute; left: -7px; top: 50%; width: 5px; height: 11px; margin-top: -5.5px; background: radial-gradient(circle, var(--muted) .9px, transparent 1.2px) 0 0 / 3.5px 3.75px; opacity: 0; transition: opacity .15s; } .rt-group:is(:hover, .dragging) .rt-ghandle::before, .rt-group .rt-ghandle.open::before { opacity: 1; } /* apart: Safari before 15.4 drops a whole selector list with :focus-visible in it */ .rt-group .rt-ghandle:focus-visible::before { opacity: 1; } /* while a row is dragged the others slide out of its way */ .rt-groups.sorting { user-select: none; -webkit-user-select: none; } .rt-groups.sorting > .rt-group { transition: transform .22s cubic-bezier(.22, 1, .36, 1); } .rt-groups.sorting .rt-ghandle { cursor: grabbing; } .rt-groups > .rt-group.dragging { position: relative; z-index: 2; background: var(--card); box-shadow: 0 6px 18px rgba(20, 22, 30, .12), 0 0 0 1px var(--line); border-radius: 8px; transition: none; } @media (prefers-reduced-motion: reduce) { .rt-groups.sorting > .rt-group { transition: none; } } .rt-group .main { flex: 1; min-width: 0; } .rt-group .nm { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; } .rt-group .nm b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-group .nm code.mdl { font: var(--code-style, normal) 500 11px/1.5 var(--code-font, var(--code)); font-stretch: var(--code-stretch, 100%); color: var(--fg-2); background: var(--card-2); border-radius: 5px; padding: 0 5px; white-space: nowrap; } .rt-group .nm small.auto { font-size: 11px; color: var(--faint); white-space: nowrap; } .rt-group .mem { margin-top: 2px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 768px) { /* 路由组模型列表窄屏换行, 避免整行截断(需放在基础规则之后) */ .rt-group .mem { white-space: normal; overflow-wrap: anywhere; } } /* a pattern the group finds models by, and how many it matches now */ .rt-group .mem.pat code, .rt-pats code { font: var(--code-style, normal) 500 11px/1.5 var(--code-font, var(--code)); font-stretch: var(--code-stretch, 100%); color: var(--fg-2); } .rt-group .mem.pat.none, .rt-pats .fbrow.none small { color: var(--amber); } /* a classifier that failed (#1929): a dot, never a stripe */ .rt-group .mem.clsfail { color: var(--amber); } .rt-group .mem.clsfail .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; } .rt-patadd { display: flex; gap: 6px; align-items: center; } .rt-pats .fbl:not(:empty) + .rt-patadd { margin-top: 4px; } .rt-patadd input { flex: 1; min-width: 0; } .rt-group .tags { display: flex; gap: 4px; flex: none; } .rt-group .tag { font-size: 11px; line-height: 18px; padding: 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); white-space: nowrap; } .rt-group .tag.bad { color: var(--red); } .rt-group .tag.idle { opacity: .55; } /* a manual group's members on its card: the one picked, marked by a dot */ .rt-picks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .rt-pick { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; height: 22px; padding: 0 8px 0 6px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 11.5px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .rt-pick:hover { color: var(--fg); border-color: var(--muted); background: var(--card); } .rt-pick .dot { width: 7px; height: 7px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--faint); } .rt-pick .ic, .rt-pick .ic-stack { width: 13px; height: 13px; flex: none; } .rt-pick .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-pick small { color: var(--faint); font-size: 10.5px; white-space: nowrap; } .rt-pick.on { color: var(--fg); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); cursor: default; } .rt-pick.on .dot { background: var(--accent); box-shadow: none; } .rt-pick.off { opacity: .55; } .rt-pick:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } .rt-gnone { padding: 14px; font-size: 12px; line-height: 1.5; } .rt-gfound, .rt-gnames { display: flex; align-items: center; gap: 12px; padding: 2px 4px 4px; } .rt-gfound .txt, .rt-gnames .txt { flex: 1; min-width: 0; display: grid; gap: 2px; } .rt-gfound b, .rt-gnames b { font-size: 12.5px; font-weight: 600; } .rt-gfound small, .rt-gnames small { font-size: 11.5px; line-height: 1.45; color: var(--muted); } /* the names setting's three choices go under its words when it is narrow */ .rt-gnames { flex-wrap: wrap; } .rt-gnames .txt { flex-basis: 220px; } .rt-ghidden { display: flex; align-items: center; padding: 4px 12px 4px 8px; } .rt-ghidden .rt-gremoved { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--faint); } .rt-ghidden .rt-gremoved:hover, .rt-ghidden .rt-gremoved.open { color: var(--fg-2); } .rt-gsel { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 14px; } .rt-group.rt-gpick { cursor: default; } .rt-group.rt-gpick.on { background: var(--card-2); } .rt-gedit { cursor: default; scroll-margin-top: 12px; } .rt-gedit .ehead.fold { cursor: pointer; } .rt-gedit .segs { max-width: 100%; } /* its hint as close under the choices as every other row's: 4px */ .rt-gedit .ctx-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .rt-gedit .ctx-wrap .hint { flex-basis: 100%; margin-top: 0; } .rt-gedit .gsuffix { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .rt-gedit .gsuffix .hint { overflow-wrap: anywhere; } .rt-gedit .ctx-wrap input.ctx-in { width: 96px; flex: none; } .rt-gedit .ctx-wrap input.first-in { width: 64px; } .rt-gedit .ctx-wrap .first-unit { margin-left: -2px; color: var(--muted); font-size: 12px; } .rt-gedit .ctx-wrap .first-unit[hidden] { display: none; } .rt-pool { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px 10px 14px; } .rt-pool .nm { flex: 1 1 12em; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; } .rt-pool .nm .ic { width: 16px; height: 16px; } .rt-pool .nm b { font-weight: 600; } .rt-pool .nm span:last-child { font-size: 12px; color: var(--muted); } /* a label column and a control column, so Routing's and Stays' segments start at one edge whatever their labels' widths */ .rt-pool .ctl { display: grid; grid-template-columns: auto auto; align-items: center; justify-items: start; gap: 6px 8px; } .rt-pool .lab { display: contents; } .rt-pool .lab small { font-size: 11px; color: var(--muted); } @media (max-width: 560px) { body:not(.web) .rt-group .tags { display: none; } } @media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) { body.web .rt-group { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; /* the logos as wide as they are */ gap: 6px 8px; padding: 12px 12px 12px 14px; /* the grip's room, as wide */ } body.web .rt-group .tags { display: flex; flex-wrap: wrap; grid-column: 2 / -1; grid-row: 2; } body.web .rt-group > .text { grid-column: 3; grid-row: 1; } body.web .rt-group .nm { flex-wrap: wrap; } body.web .rt-group .mem { white-space: normal; overflow-wrap: anywhere; } body.web .rt-pick { height: auto; min-height: 44px; padding: 8px; font-size: 12.5px; } body.web .rt-pick { flex-wrap: wrap; } body.web .rt-gedit { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px; } body.web .rt-gedit label { text-align: left; padding-top: 8px; } body.web .rt-gedit .segs { flex-wrap: wrap; } body.web .rt-gedit .fbrow { flex-wrap: wrap; justify-content: normal; } body.web .rt-gedit .fbrow .n { flex: 1 1 calc(100% - 60px); white-space: normal; overflow-wrap: anywhere; } body.web .rt-gedit .fbrow > .grow { display: none; } body.web .rt-gedit .fbrow .text { min-width: 44px; } body.web .rt-cond { height: auto; min-height: 44px; } body.web .rt-gadd { min-height: 44px; } body.web .rt-pool .ctl { grid-template-columns: minmax(0, 1fr); } body.web .rt-pool .lab small { padding-top: 6px; } body.web .rt-pool .segs { flex-wrap: wrap; } body.web .rt-stats { flex-wrap: wrap; gap: 10px 16px; } /* the upstream a request went to takes a line of its own on a phone, so the reasoning beside the provider isn't cut to two letters */ body.web .rt-req .to.upstreamed { flex-wrap: wrap; row-gap: 0; } body.web .rt-req .to.upstreamed .said { flex: 1 1 0; min-width: 0; } body.web .rt-req .to .upstream { flex-basis: 100%; padding-left: 12px; } body.web #agent-view-routing .row-head .note { flex: 1 1 100%; order: 1; margin: 2px 0 0; } } .rt-gsec .segs .opt { white-space: nowrap; } /* the groups, in a page 520px wide or less */ :where(.rt-more.max520) .rt-gsec .row-head .note { display: none; } :where(.rt-more.max520) .rt-gsec .rt-gfilter { flex: 1 1 auto; width: auto; } :where(.rt-more.max520) .rt-gedit { grid-template-columns: minmax(0, 1fr); gap: 4px; } :where(.rt-more.max520) .rt-gedit label { text-align: left; padding-top: 8px; } :where(.rt-more.max520) .rt-gedit .segs .opt { padding-left: 9px; padding-right: 9px; } /* the models and patterns take the column's width and no more: a grid's auto track grows to its widest row's content, so a long model name with its chips pushed the rows past the editor's edge, cut off there, and the patterns below no longer lined up with them. Tight, the name gives way (it ellipsizes, to 8em), and tighter still (German's longer words) the chips go on a line of their own, right-aligned, rather than past the edge; none of them is ever cut */ .rt-gedit .fallback, .rt-gedit .fallback:not(.rt-rules) .fbl { grid-template-columns: minmax(0, 1fr); } /* in :where, so a phone's own row (body.web, above) still wins */ :where(.rt-gedit .fallback:not(.rt-rules)) .fbrow { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; } :where(.rt-gedit .fallback:not(.rt-rules)) .fbrow .n { flex: 1 1 8em; } .rt-gedit .fbrow .n { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-gedit .fbrow .n > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .rt-gedit .fbrow .n > small { flex: 0 100 auto; } /* gives way before the name */ .rt-gedit .fbrow .n small { color: var(--muted); font-size: 11.5px; } .rt-gedit .fbrow.off .n { color: var(--muted); text-decoration: line-through; } .rt-gedit .fbrow .rt-mon { transform: scale(.85); } /* a named member's number is its handle: the grip beside it shows on hover, dragged or from the keyboard only, as on the groups' cards */ .rt-gedit .fbrow .rt-mhandle.ag-handle { position: relative; width: 18px; height: 22px; margin: 0 -2px; font: inherit; color: var(--muted); font-variant-numeric: tabular-nums; } .rt-gedit .fbrow .rt-mhandle::before { content: ""; position: absolute; left: -7px; top: 50%; width: 5px; height: 11px; margin-top: -5.5px; background: radial-gradient(circle, var(--muted) .9px, transparent 1.2px) 0 0 / 3.5px 3.75px; opacity: 0; transition: opacity .15s; } .rt-gedit .fbrow:is(:hover, .dragging) .rt-mhandle::before { opacity: 1; } /* apart: Safari before 15.4 drops a whole selector list with :focus-visible in it */ .rt-gedit .fbrow .rt-mhandle:focus-visible::before { opacity: 1; } .rt-gedit .fbl.sorting { user-select: none; -webkit-user-select: none; } .rt-gedit .fbl.sorting > .fbrow { transition: transform .22s cubic-bezier(.22, 1, .36, 1); } .rt-gedit .fbl.sorting .rt-mhandle { cursor: grabbing; } .rt-gedit .fbl > .fbrow.dragging { position: relative; z-index: 2; background: var(--card); box-shadow: 0 6px 18px rgba(20, 22, 30, .12), 0 0 0 1px var(--line); border-radius: 8px; transition: none; } @media (prefers-reduced-motion: reduce) { .rt-gedit .fbl.sorting > .fbrow { transition: none; } } .rt-gedit .fbrow.muted > :not(.rt-mon):not(.text) { opacity: .45; } /* a member's own reasoning, beside its Up and Remove */ .rt-gedit .fbrow .rt-fixed { height: 24px; padding: 0 9px; font-size: 11.5px; flex: none; } /* a member's weight under By weight (#1910), edited in place */ .rt-gedit .fbrow .rt-weight { font-variant-numeric: tabular-nums; } .rt-gedit .fbrow .rt-weight-in { width: 64px; flex: none; height: 24px; font-size: 12px; padding: 0 6px; } /* a group a member of a group is: it takes no reasoning of its own (its models reason as it says, provider.SaveGroup), so its chip names the group it follows and opens that group's card instead. It takes the room it needs and gives it back when the row is tight, rather than widening it: the desktop app's member row doesn't wrap (only body.web's does) */ .rt-gedit .fbrow .rt-inner { flex: 0 1 auto; min-width: 0; } .rt-gedit .fbrow .rt-inner > span { overflow: hidden; text-overflow: ellipsis; } .rt-gadd { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: 8px; border: 1px dashed var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; } .rt-gadd:hover, .rt-gadd.open { color: var(--fg); border-color: var(--muted); background: var(--card); } .rt-gadd svg { flex: none; } /* Add a rule, and beside it a rule by what the message asks for */ .rt-gadds { display: flex; flex-wrap: wrap; gap: 6px; } .rt-gadds > [hidden] { display: none; } /* a group's rules, each one line read as a sentence: the conditions it has, → and the model it sends that turn to first; its acts under ⋯ */ .rt-rules .fbl:not(:empty) + .rt-gadds { margin-top: 2px; } /* the rules share their columns (each rule a subgrid of the list), so every rule's → and model start at one x: the number, the conditions (as wide as the widest rule's, to at most half the width before they wrap), what it does, the ⋯. Where subgrid isn't, each rule keeps the same columns on its own */ .rt-rules .fbl { display: grid; grid-template-columns: 16px fit-content(50%) minmax(0, 1fr) auto; gap: 0; } .rt-rule { grid-column: 1 / -1; display: grid; grid-template-columns: 16px fit-content(50%) minmax(0, 1fr) auto; align-items: start; column-gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 12.5px; } @supports (grid-template-columns: subgrid) { .rt-rule { grid-template-columns: subgrid; } } .rt-rule:first-child { border-top: 0; padding-top: 2px; } .rt-rule > .i { line-height: 26px; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: right; } .rt-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; } /* on a narrow page what it does goes under the conditions */ @media (max-width: 640px) { .rt-rules .fbl { display: flex; flex-direction: column; } .rt-rule { grid-template-columns: 16px minmax(0, 1fr) auto; row-gap: 6px; } .rt-rule > .rt-then { grid-column: 2; grid-row: 2; } .rt-rule > .rt-rmore { grid-column: 3; grid-row: 1; } } .rt-arrow { color: var(--muted); font-size: 12px; padding: 0 1px; } /* a set condition, and the × on its corner that takes it off: shown on hover or focus, always where nothing hovers */ .rt-c { position: relative; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; } .rt-cx { position: absolute; top: -5px; right: -5px; z-index: 1; display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .12s, color .12s; } .rt-cx:hover { color: var(--fg); border-color: var(--muted); } .rt-c:hover > .rt-cx, .rt-c:focus-within > .rt-cx { opacity: 1; pointer-events: auto; } @media (hover: none) { .rt-cx { opacity: 1; pointer-events: auto; } } /* the quiet + that adds a condition; in words while the rule has none */ .rt-addc { display: inline-grid; grid-auto-flow: column; place-items: center; gap: 5px; width: 24px; height: 24px; padding: 0; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; } .rt-addc.wide { width: auto; height: 26px; padding: 0 10px 0 8px; border: 1px dashed var(--line); } .rt-addc:hover, .rt-addc.open, .rt-addc:focus-visible { color: var(--fg); background: var(--card-2); } .rt-addc.wide:hover, .rt-addc.wide.open { border-color: var(--muted); } /* the rule's ⋯: on hover, as the usage rows' */ .rt-rule > .rt-rmore { align-self: start; opacity: 0; transition: opacity .12s, background .12s, color .12s; } .rt-rule:hover > .rt-rmore, .rt-rule > .rt-rmore:focus-visible, .rt-rule > .rt-rmore.open { opacity: 1; } @media (hover: none) { .rt-rule > .rt-rmore { opacity: 1; } } /* how a part works, under an ⓘ beside it */ .rt-info { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--muted); cursor: help; outline: none; } .rt-info:hover, .rt-info:focus-visible { color: var(--fg); } .rt-info:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); } .rt-info[hidden] { display: none; } .rt-gadds { align-items: center; } .rt-pickrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .rt-cond { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px dashed var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; max-width: 100%; transition: color .15s, border-color .15s, background .15s; } .rt-cond:hover { color: var(--fg); border-color: var(--muted); } .rt-cond.on { border-style: solid; color: var(--fg); background: var(--card-2); } /* a chip in a Settings row too, where .row .ic makes icons 18–22px (duanckham on X) */ .rt-cond .ic, .row .rt-cond .ic, body.window .row .rt-cond .ic { width: 14px; height: 14px; flex: none; } .rt-cond > span { overflow: hidden; text-overflow: ellipsis; } /* a group's logos overlap in discs whose rings sit outside them: clipped, the first lost its edge */ .rt-cond > .ic-stack { overflow: visible; } .rt-cond.tk { cursor: text; } .rt-cond.in { cursor: text; } .rt-cond.fd { cursor: text; } .rt-cond.fd input, .editor .rt-cond.fd input[type="text"] { width: 24ch; } .rt-cond.xf { cursor: text; } .rt-cond.xf input, .editor .rt-cond.xf input[type="text"] { width: 24ch; } /* a narrow line squeezes what was typed (it scrolls in its box), never the word that says what the box is */ .rt-cond.in > span:not(.rt-grow), .rt-cond.fd > span, .rt-cond.xf > span { flex: none; } .rt-cond.fd > input, .rt-cond.xf > input { min-width: 0; flex: 0 1 auto; } /* the intent, a sentence, shown whole: its box as wide as the words and onto more lines where the line ends. A hidden copy of the words, in the same cell and font, gives the box its size; the pill rounds less once it is more than one line */ .rt-cond.in { height: auto; min-height: 26px; padding-top: 2px; padding-bottom: 2px; border-radius: 13px; white-space: normal; } .rt-cond.in > span:first-child { align-self: flex-start; line-height: 20px; } .rt-cond > .rt-grow { align-self: flex-start; display: inline-grid; flex: 0 1 auto; min-width: min(6ch, 100%); max-width: 100%; overflow: visible; } .rt-grow::after, .rt-grow > textarea, .editor .rt-grow > textarea { grid-area: 1 / 1; box-sizing: border-box; margin: 0; padding: 0 2px; border: 0; min-width: 0; font: inherit; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; } .rt-grow::after { content: attr(data-v) " "; visibility: hidden; } .rt-grow > textarea, .editor .rt-grow > textarea { width: 100%; height: 100%; min-height: 20px; resize: none; overflow: hidden; background: transparent; color: inherit; outline: none; box-shadow: none; border-radius: 0; } @media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) { /* a phone's page sets its boxes at 16px; a rule's fields keep the line's own size (iOS gets maximum-scale=1 from layout.js, so focus doesn't zoom) */ body.web .rt-cond input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), body.web .rt-grow, body.web .rt-grow > textarea { font-size: inherit; } body.web .rt-cond.in { padding-top: 11px; padding-bottom: 11px; } /* the first line in the middle of the 44px pill */ body.web .rt-grow > textarea { min-height: 0; } } /* a rule's hours: two times in the pill, typed; one that isn't a time is marked */ .rt-cond.tm { cursor: text; } .rt-cond.tm input.clock, .editor .rt-cond.tm input.clock[type="text"] { width: 5.5ch; text-align: center; } .rt-cond.tm.bad { border-style: solid; border-color: var(--amber, var(--muted)); } .rt-cond[hidden] { display: none; } .rt-classifier { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } .rt-classifier[hidden] { display: none; } .rt-classifier .w { color: var(--muted); font-size: 12px; } .rt-classifier .hint { flex-basis: 100%; } /* the effort's classifier offering to pick the model too: a line of its own, wrapping rather than running past a narrow window */ .rt-classifier .rt-cls-more { margin-left: -7px; white-space: normal; text-align: left; color: var(--accent); } /* the levels a group names for agents (#295): one toggle each */ .rt-levels { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; } .rt-levels[hidden] { display: none; } /* the field is the pill: the editor's boxed input (its border and focus ring) stays off it */ .rt-cond input, .editor .rt-cond input[type="text"], .editor .rt-cond input[type="number"], .editor .rt-cond input:focus { box-shadow: none; border-radius: 0; } .editor .rt-cond input:focus-visible { box-shadow: none; border-radius: 0; } .rt-cond:focus-within { border-style: solid; border-color: var(--accent); color: var(--fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .rt-cond input, .editor .rt-cond input[type="text"], .editor .rt-cond input[type="number"] { width: 7ch; height: 20px; padding: 0 2px; border: 0; background: transparent; color: inherit; font: inherit; font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield; } .rt-cond input::-webkit-outer-spin-button, .rt-cond input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .rt-rwarn { color: var(--amber, var(--muted)); font-size: 11.5px; } .rt-rwarn:empty { display: none; } /* a replay: the time it is replaying, what is in flight then, and a track */ .rt-replay { margin: 10px 0 2px; padding: 8px 10px 10px; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 6px; } .rp-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .rp-tag { font-size: 11px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; } .rp-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: rppulse 1.2s ease-in-out infinite; } @keyframes rppulse { 50% { opacity: .3; } } .rp-clock { font-size: 22px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--fg); } .rp-day { font-size: 11px; color: var(--muted); } .rp-skip { font-size: 11px; color: var(--accent); } .rp-top .grow { flex: 1; } .rp-what { display: grid; gap: 3px; min-height: 20px; } .rp-req { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); min-width: 0; cursor: pointer; } .rp-req b { color: var(--fg); font-weight: 600; } .rp-req.on .rp-n { color: var(--fg); } .rp-req i.ag { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--agent); } .rp-req .rp-to { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rp-req .rp-at { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; color: var(--faint); } .rp-n { flex: none; font-variant-numeric: tabular-nums; } .rp-wait { font-size: 12px; color: var(--faint); } .rp-track { position: relative; height: 16px; cursor: pointer; } .rp-track::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 1px; background: var(--line); } .rp-mark { position: absolute; top: 4px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 1.5px; background: var(--agent); opacity: .45; transition: opacity .2s, transform .2s; } .rp-mark.on { opacity: 1; transform: scaleY(1.5); } .rp-head { position: absolute; top: 1px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--fg); pointer-events: none; } @media (max-width: 520px) { .rp-req .rp-at { display: none; } } /* the days the routing history keeps: live, then each day, newest first */ .rt-days, .rt-group-by { display: flex; gap: 4px; overflow-x: auto; padding: 0 2px 6px; scrollbar-width: none; } .rt-days::-webkit-scrollbar, .rt-group-by::-webkit-scrollbar { display: none; } .rt-day { flex: none; display: inline-flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--muted); padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: none; white-space: nowrap; } .rt-day small { font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; } .rt-day:hover { color: var(--fg); } .rt-day.on { color: var(--fg); border-color: var(--fg); } /* the days that fit, the rest under the last pill (#961) */ .rt-days { overflow-x: hidden; } .rt-days .rt-day[hidden] { display: none; } .rt-day-more svg { flex: none; align-self: center; opacity: .7; transition: transform .15s var(--ease); } .rt-day-more.open svg { transform: rotate(180deg); } /* the tray panel's Routing tab: a small stage, then the gateway's latest requests, two lines each */ .pr-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); column-gap: 38px; align-items: center; height: 104px; padding: 0 10px; border-radius: 11px; background: var(--card); box-shadow: var(--card-edge); overflow: hidden; } .ps-wires, .ps-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .ps-wire { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-linecap: round; transition: stroke .25s; } .ps-wire.on { stroke: color-mix(in srgb, var(--agent, var(--accent)) 55%, transparent); } .ps-col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ps-from { align-items: flex-end; } .ps-to { align-items: flex-start; } .ps-node { display: flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; color: var(--fg); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); } .ps-node .ic, .ps-node .ic img, .ps-node .ic svg { width: 13px; height: 13px; flex: none; } .ps-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; } .ps-name small { margin-left: 4px; font-size: 10.5px; font-weight: 400; color: var(--muted); } .ps-dst > i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--green); } .ps-dst.bad > i { background: var(--red); } .ps-dst.wait > i { background: var(--muted); animation: rtlive 1.8s infinite; } .ps-hub { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--fg); background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 1px 3px rgba(0, 0, 0, .08); } .ps-hub svg { width: 24px; height: 24px; } .ps-hub.busy { animation: ps-ring 1.8s ease-out infinite; } @keyframes ps-ring { 0% { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 0 color-mix(in srgb, var(--fg) 16%, transparent); } 70%, 100% { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 7px transparent; } } .ps-dot { fill: var(--agent, var(--accent)); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--agent, var(--accent)) 60%, transparent)); transition: fill .2s, opacity .3s; } .ps-dot.ok { fill: var(--green); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--green) 60%, transparent)); } .ps-dot.bad { fill: var(--red); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--red) 60%, transparent)); } .ps-dot.wait { animation: ps-wait 1.2s ease-in-out infinite; } .ps-dot.gone { opacity: 0; } @keyframes ps-wait { 50% { opacity: .45; } } .panel-routing { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 6px; } .pr-head { display: flex; align-items: center; gap: 8px; min-height: 22px; padding: 0 2px 0 4px; font-size: 12px; color: var(--muted); } .pr-head .rt-livedot { margin-left: 0; flex: none; } .pr-today { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pr-today b { color: var(--fg); font-weight: 600; } .pr-head .text { flex: none; font-size: 12px; } .skeleton.pr-sk { display: inline-block; width: 150px; height: 9px; border-radius: 4px; vertical-align: middle; } .skeleton.pr-sk-row { height: 40px; border-radius: 11px; } .pr-none { margin: 0; padding: 12px; border-radius: 11px; background: var(--card); box-shadow: var(--card-edge); font-size: 12px; line-height: 1.55; color: var(--muted); } .pr-none b { display: block; color: var(--fg); font-weight: 550; } .pr-list { display: flex; flex-direction: column; padding: 4px; border-radius: 11px; background: var(--card); box-shadow: var(--card-edge); } .pr-req { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 6px 8px; border-radius: 8px; font: inherit; font-size: 12px; text-align: left; color: var(--fg-2); background: none; border: 0; cursor: pointer; } .pr-req:hover { background: var(--card-2); } .pr-a, .pr-to { display: flex; align-items: center; gap: 6px; min-width: 0; } .pr-a .ic, .pr-a .ic img, .pr-a .ic svg { width: 14px; height: 14px; flex: none; } .pr-who { flex: none; color: var(--fg); font-weight: 550; } .pr-a .m { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--code-style, normal) 500 11px/1.5 var(--code-font, var(--code)); font-stretch: var(--code-stretch, 100%); color: var(--fg-2); background: var(--card-2); border-radius: 5px; padding: 0 5px; } .pr-a .kind { flex: 0 100 auto; min-width: 3.2em; max-width: 8em; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; line-height: 16px; padding: 0 5px; border-radius: 5px; color: var(--muted); background: var(--card-2); border: 1px solid var(--line); white-space: nowrap; } .pr-req .at { justify-self: end; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11px; } .pr-to { padding-left: 20px; gap: 5px; color: var(--fg-2); } .pr-to > i { flex: none; width: 14px; margin-left: -20px; margin-right: 1px; text-align: center; font-style: normal; font-size: 11px; color: var(--faint); } .pr-req.moved .pr-to > i { color: var(--accent); } .pr-req.bad .pr-to { color: var(--red); } .pr-req.bad .pr-to > i { color: var(--red); } .pr-req.wait .pr-to > i { color: var(--fg-2); animation: ps-wait 1.2s ease-in-out infinite; } .pr-where { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pr-m { flex: 0 2 auto; min-width: 2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); } .pr-m::before { content: "· "; } .pr-to .swap { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; line-height: 16px; padding: 0 5px; border-radius: 5px; color: var(--amber); background: var(--amber-soft); white-space: nowrap; } .pr-line { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; } .pr-line .pr-to { flex: 1 1 auto; } .pr-req .meta { flex: none; max-width: 100%; margin-left: auto; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } @media (prefers-reduced-motion: reduce) { .pr-req.wait .pr-to > i, .ps-dst.wait > i, .ps-hub.busy, .ps-dot.wait { animation: none; } } @supports not (grid-template-columns: subgrid) { .rt-req { grid-template-columns: auto fit-content(32%) minmax(min(14em, 30%), 1fr) fit-content(40%); } @media (max-width: 700px) { .rt-reqs { grid-template-columns: auto minmax(0, 1fr); } .rt-req { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; } .rt-req .asked { grid-column: 2; grid-row: 1; } .rt-req .to { grid-column: 2; grid-row: 2; } .rt-req .meta { grid-column: 2; grid-row: 3; justify-content: flex-start; } } } /* templates: groups for common needs made of the user's own models, each added in a click (provider.Templates) */ .rt-gtpl { padding: 10px 12px 12px; display: grid; gap: 8px; } .rt-gtpl-head { font-size: 12px; color: var(--muted); } /* Import a group (laincatx on X): the text pasted, then what came of it */ .rt-gimport { padding: 10px 12px 12px; display: grid; gap: 8px; min-width: 0; border-bottom: 1px solid var(--line); } .rt-gimport-text { width: 100%; box-sizing: border-box; min-height: 72px; padding: 7px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font-family: var(--code-font, var(--code)); font-size: 12px; line-height: 1.45; resize: vertical; outline: none; overflow-wrap: anywhere; } .rt-gimport-text:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .rt-gimport .acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } .rt-gimport-done { font-size: 12.5px; font-weight: 600; } .rt-gimport-missing, .rt-gimport-note { font-size: 12px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; } .rt-gimport-missing { color: var(--danger, #d66); } .rt-gtpl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .rt-gtpl-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; } .rt-gtpl-card .hd { display: flex; align-items: center; gap: 8px; min-width: 0; } .rt-gtpl-card .hd b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; } .rt-gtpl-card .hd .ic, .rt-gtpl-card .hd .ic-stack { flex: none; } .rt-gtpl-card .desc { font-size: 11.5px; line-height: 1.45; color: var(--muted); } .rt-gtpl-card .mem { font-size: 11.5px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-gtpl-card .mem.why { color: var(--faint); white-space: normal; } .rt-gtpl-card.off b { color: var(--muted); } .rt-gtpl-card .acts { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; } .rt-gtplbtn { display: inline-flex; align-items: center; gap: 4px; } /* Magpie Native Context Window Styles */ /* Context windows: a request's prompt as a card (Routing, the Usage page's Context tab) and each agent's score and tags. */ :root { --k-system: var(--c6); --k-tools: var(--c2); --k-memory: var(--c4); --k-files: var(--c3); --k-results: var(--c5); --k-chat: var(--c1); --k-free: color-mix(in srgb, var(--fg) 7%, transparent); } .k-system { --k: var(--k-system); } .k-tools { --k: var(--k-tools); } .k-memory { --k: var(--k-memory); } .k-files { --k: var(--k-files); } .k-results { --k: var(--k-results); } .k-chat { --k: var(--k-chat); } i.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 2.5px; background: var(--k); } i.dot.free { background: var(--k-free); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent); } .ctx-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 14px; min-width: 0; font-variant-numeric: tabular-nums; } .ctx-head { display: flex; align-items: center; gap: 8px; min-width: 0; } .ctx-head .grow, .ctx-foot .grow, .ctx-contents-head .grow, .ctx-agent-head .grow, .ctx-agent-foot .grow, .ctx-sess-head .grow { flex: 1; } .ctx-title { font-size: 13px; font-weight: 600; color: var(--fg); white-space: nowrap; } .ctx-model { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--code-font, var(--code)); font-size: 11px; color: var(--muted); } .ctx-state { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11px; font-weight: 500; background: var(--pill); color: var(--fg-2); } .ctx-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); } .ctx-state.counted i { background: var(--green); } .ctx-state.live { background: var(--green-soft); color: var(--green); } .ctx-state.live i { background: var(--green); animation: ctx-pulse 1.4s ease-in-out infinite; } /* every word of the state in one cell, the one that is on shown: the pill is as wide whatever the request's state, so nothing beside it moves */ .ctx-state-w { display: inline-grid; } .ctx-state-w > span { grid-area: 1 / 1; text-align: center; white-space: nowrap; } .ctx-state-w > span:not(.on) { visibility: hidden; } @keyframes ctx-pulse { 50% { opacity: .35; transform: scale(.8); } } .ctx-k { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } :root[lang="zh"] .ctx-k, :root[lang="ja"] .ctx-k { letter-spacing: .02em; } .ctx-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px 28px; } .ctx-top > :only-child { grid-column: 1 / -1; } .ctx-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; } /* the figure and its words apart: a flex item's leading space is dropped, so the gap is the space ("—命中" read as one, dumplings on Discord) */ .ctx-big { display: flex; align-items: baseline; gap: .35em; white-space: nowrap; color: var(--muted); font-size: 13px; } .ctx-big b { font-size: 28px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: var(--fg); } .ctx-sub { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[lang="zh"] .ctx-sub, :root[lang="ja"] .ctx-sub { letter-spacing: .02em; } .ctx-health { height: 17px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 9px; font-size: 10px; letter-spacing: .03em; } .ctx-health.ok { background: var(--green-soft); color: var(--green); } .ctx-health.warn { background: var(--amber-soft); color: var(--amber); } .ctx-health.bad { background: var(--red-soft); color: var(--red); } .ctx-bar { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--k-free); overflow: hidden; } .ctx-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--green); transform-origin: left; animation: ctx-grow .7s var(--ease, ease) backwards; } .ctx-cache .ctx-bar { margin: 3px 0 2px; } .ctx-cache .ctx-bar i { transition: width .3s var(--ease, ease); } /* under way: the last request's cache, dimmed till this one's comes */ .ctx-cache :is(.ctx-big, .ctx-bar) { transition: opacity .3s var(--ease, ease); } .ctx-cache.was :is(.ctx-big, .ctx-bar) { opacity: .45; } /* nothing to show: a dash and the words why, no empty bar; the bar keeps its room, so the card doesn't move when the figure comes */ .ctx-cache.none .ctx-big b { color: var(--faint); } .ctx-cache.none .ctx-bar { visibility: hidden; } @media (prefers-reduced-motion: reduce) { .ctx-cache .ctx-bar i, .ctx-cache :is(.ctx-big, .ctx-bar) { transition: none; } } @keyframes ctx-grow { from { transform: scaleX(0); } } /* the window, a cell for each 1/400 of it */ /* refined waffle: many thin cells (each = 1/400 of the window); fewer on narrow screens */ .ctx-waffle { display: grid; grid-template-columns: repeat(80, minmax(0, 1fr)); gap: 1.5px; } @media (max-width: 720px) { .ctx-waffle { grid-template-columns: repeat(40, minmax(0, 1fr)); } } .ctx-waffle > i { aspect-ratio: 1; border-radius: 2px; background: var(--k, var(--k-free)); transition: opacity .16s, transform .16s; animation: ctx-cell .32s var(--ease, ease) backwards; animation-delay: var(--d, 0ms); } .ctx-waffle > i.free { --k: var(--k-free); } @keyframes ctx-cell { from { opacity: 0; transform: scale(.4); } } .ctx-waffle[data-f] > i { opacity: .16; } .ctx-waffle[data-f="system"] > i.k-system, .ctx-waffle[data-f="tools"] > i.k-tools, .ctx-waffle[data-f="memory"] > i.k-memory, .ctx-waffle[data-f="files"] > i.k-files, .ctx-waffle[data-f="results"] > i.k-results, .ctx-waffle[data-f="chat"] > i.k-chat, .ctx-waffle[data-f="free"] > i.free, .ctx-waffle[data-f="item"] > i.on { opacity: 1; } .ctx-waffle[data-f="item"] > i.on { transform: scale(1.12); } .ctx-tip { position: absolute; z-index: 5; min-width: 190px; max-width: 280px; padding: 8px 10px; border-radius: 9px; background: #17171b; color: #ededf1; box-shadow: 0 10px 30px rgba(0, 0, 0, .28); font-size: 11.5px; pointer-events: none; display: flex; flex-direction: column; gap: 3px; } .ctx-tip[hidden] { display: none; } .ctx-tip-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; } .ctx-tip-head .grow { flex: 1; } .ctx-tip-head span:last-child { color: #a1a1aa; } .ctx-tip-row { display: flex; gap: 10px; color: #b9b9c1; } .ctx-tip-row .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ctx-tip-row.on { color: #fff; font-weight: 500; } .ctx-tip-more { color: #85858d; font-size: 10.5px; } .ctx-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: -4px; } .ctx-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fg-2); cursor: default; padding: 2px 0; } .ctx-leg .v { color: var(--muted); } .ctx-leg:hover .n { color: var(--fg); } .ctx-contents { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); } .ctx-contents-head { display: flex; align-items: center; gap: 10px; min-width: 0; } .ctx-contents-head .segs { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex: none; } .ctx-contents-head .segs .opt { height: 20px; padding: 0 9px; font-size: 11px; white-space: nowrap; flex: none; } :where(.ctx-card.max520) .ctx-contents-head { flex-wrap: wrap; } :where(.ctx-card.max520) .ctx-contents-head .segs { flex: 1 1 100%; } .ctx-rows { display: flex; flex-direction: column; } .ctx-row { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 6px; margin: 0 -6px; border-radius: 6px; font-size: 12px; } .ctx-row:hover { background: var(--pill); } .ctx-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; overflow: hidden; white-space: nowrap; } .ctx-name b { font-weight: 500; color: var(--fg); overflow: hidden; text-overflow: ellipsis; flex: none; max-width: 100%; } .ctx-name small { color: var(--faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; min-width: 0; } .ctx-x { font-size: 11px; color: var(--muted); } .ctx-tag { flex: none; font-family: var(--code-font, var(--code)); font-size: 10px; padding: 1px 5px; border-radius: 4px; background: var(--pill); color: var(--muted); } .ctx-mini { flex: none; width: 72px; height: 4px; border-radius: 2px; background: var(--k-free); overflow: hidden; } .ctx-mini i { display: block; height: 100%; border-radius: 2px; background: var(--k); } .ctx-v { flex: none; width: 48px; text-align: right; color: var(--fg-2); font-size: 11.5px; } :where(.ctx-card.max420) :is(.ctx-mini, .ctx-tag) { display: none; } .ctx-empty { font-size: 12px; color: var(--muted); padding: 4px 0; } .ctx-more { align-self: flex-start; margin-top: 2px; font-size: 11.5px; } .ctx-foot { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 11px; color: var(--muted); } .ctx-crumbs { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--code-font, var(--code)); font-size: 10.5px; color: var(--muted); } .ctx-note { white-space: nowrap; flex: none; } .ctx-session { display: flex; align-items: center; gap: 12px; margin-top: -4px; } .ctx-session .ctx-spark { flex: 1; height: 34px; } .ctx-spark { position: relative; display: block; width: 100%; } .ctx-spark svg { display: block; width: 100%; height: 100%; overflow: visible; } .ctx-spark .at { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--card); border: 1.6px solid var(--k-chat); box-sizing: border-box; pointer-events: none; } .ctx-spark .win { stroke: var(--line); stroke-dasharray: 3 3; stroke-width: 1; vector-effect: non-scaling-stroke; } .ctx-spark .area { fill: color-mix(in srgb, var(--k-chat) 14%, transparent); } .ctx-spark .line { fill: none; stroke: var(--k-chat); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .ctx-spark .hit { fill: transparent; cursor: pointer; } .ctx-spark .hit:hover { fill: color-mix(in srgb, var(--fg) 7%, transparent); } /* Routing: the card under the story of the request */ .rt-log .ctx-card { margin-top: 12px; } /* folded: its head alone, how full it is beside the title */ .ctx-fold { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 22px; margin: -2px 0 -2px -4px; padding: 0 6px 0 4px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; } .ctx-fold:hover { background: var(--pill); } .ctx-fold .tw { display: inline-flex; width: 10px; flex: none; color: var(--faint); } .ctx-fold .tw svg { transition: transform .2s var(--ease, ease); } .ctx-card.shut .ctx-fold .tw svg { transform: rotate(-90deg); } .ctx-short { display: none; flex: none; font-size: 11.5px; color: var(--muted); white-space: nowrap; } .ctx-card.shut .ctx-short { display: inline; } /* the padding is the open card's, so the title stays where it is when it opens and the page doesn't follow it (it moved 4px with a 10px one) */ .ctx-card.shut > :not(.ctx-head) { display: none; } /* its head alone, the space under it is the space over it */ .ctx-card.shut { padding-bottom: 14px; } :where(.ctx-card.shut.max420) .ctx-model { display: none; } /* folded, the head is one line of a fixed height whatever a live request puts in it, so nothing under it moves; a thin bar of what fills the window, a part each, takes the room between the figure and the model */ .ctx-card.shut .ctx-head { height: 20px; white-space: nowrap; } .ctx-stack { display: none; flex: 1 1 0; min-width: 24px; max-width: 360px; height: 6px; border-radius: 3px; background: var(--k-free); overflow: hidden; } .ctx-card.shut .ctx-stack { display: flex; } .ctx-stack i { flex: none; height: 100%; background: var(--k); transition: width .3s var(--ease, ease); } @media (prefers-reduced-motion: reduce) { .ctx-stack i { transition: none; } } /* the Usage page's Context tab */ .ctx-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; margin: 4px 0 18px; } .ctx-agent, .ctx-tune { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 12px; min-width: 0; font-variant-numeric: tabular-nums; } .ctx-agent-head { display: flex; align-items: center; gap: 10px; min-width: 0; } .ctx-who-box { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ctx-who { display: flex; align-items: center; gap: 8px; min-width: 0; } .ctx-who .ic { width: 20px; height: 20px; flex: none; } .ctx-who b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ctx-who-sub { font-size: 11px; color: var(--muted); } .ctx-grade { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; } .ctx-grade-word { font-size: 10.5px; font-weight: 600; } .ctx-ring { position: relative; width: 52px; height: 52px; --tone: var(--accent); } .ctx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ctx-ring circle { fill: none; stroke-width: 5; stroke-linecap: round; } .ctx-ring .track { stroke: var(--k-free); } .ctx-ring .arc { stroke: var(--tone); stroke-dashoffset: var(--to); animation: ctx-arc .9s var(--ease, ease) backwards; } .ctx-pane.still .ctx-waffle > i, .ctx-pane.still .ctx-bar i, .ctx-pane.still .ctx-ring .arc { animation: none; } @keyframes ctx-arc { from { stroke-dashoffset: 163.36; } } .ctx-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; font-weight: 650; letter-spacing: -.02em; } .ctx-ring.great, .ctx-grade-word.great { --tone: var(--green); color: var(--green); } .ctx-ring.good, .ctx-grade-word.good { --tone: var(--c2); color: var(--c2); } .ctx-ring.fair, .ctx-grade-word.fair { --tone: var(--amber); color: var(--amber); } .ctx-ring.poor, .ctx-grade-word.poor { --tone: var(--red); color: var(--red); } /* colorblind mode turns --c2 amber, as fair's; good keeps a blue, its palette's --c1 (#2073) */ :root[data-colorblind="1"] :is(.ctx-ring, .ctx-grade-word).good { --tone: var(--c1); color: var(--c1); } .ctx-ring b { color: var(--fg); } .ctx-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; } .ctx-score { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 11.5px; color: var(--fg-2); cursor: default; } .ctx-score .ctx-bar { height: 4px; } .ctx-score .ctx-bar i { background: var(--green); } .ctx-score.warn .ctx-bar i { background: var(--amber); } .ctx-score.bad .ctx-bar i { background: var(--red); } .ctx-score .v { color: var(--muted); font-size: 10.5px; } .ctx-tags { display: flex; flex-wrap: wrap; gap: 6px; } .ctx-tags:empty { display: none; } .ctx-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11.5px; font-weight: 500; background: var(--pill); color: var(--fg-2); cursor: default; } .ctx-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--c7); } .ctx-chip.good { background: var(--green-soft); color: var(--green); } .ctx-chip.good i { background: var(--green); } .ctx-chip.warn { background: var(--amber-soft); color: var(--amber); } .ctx-chip.warn i { background: var(--amber); } .ctx-chip.info i { background: var(--accent); } .ctx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; padding: 10px 0 2px; border-top: 1px solid var(--line); } .ctx-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: default; } .ctx-fact b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .ctx-fact .ctx-k { font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; display: block; } .ctx-mix { display: flex; flex-direction: column; gap: 6px; } .ctx-share { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--k-free); } .ctx-share i { display: block; min-width: 3px; background: var(--k); } .ctx-mix-keys { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11px; color: var(--muted); } .ctx-mix-keys span { display: inline-flex; align-items: center; gap: 5px; } .ctx-agent-foot { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: auto; } .ctx-models { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; } .ctx-models code { font-family: var(--code-font, var(--code)); font-size: 10.5px; padding: 2px 6px; border-radius: 5px; background: var(--pill); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .ctx-agent-foot .text { flex: none; font-size: 11.5px; } .ctx-sess-head { margin-top: 6px; } .ctx-sess-head .segs .opt { height: 20px; padding: 0 9px; font-size: 11px; } .ctx-sess-list { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .ctx-sess + .ctx-sess { border-top: 1px solid var(--line-2, var(--line)); } .ctx-sess-row { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 20px minmax(0, 1.3fr) minmax(80px, 1fr) 44px minmax(0, auto) 92px; align-items: center; gap: 12px; padding: 8px 14px; cursor: pointer; font-size: 12px; font-variant-numeric: tabular-nums; } .ctx-sess-row:hover { background: var(--pill); } .ctx-sess-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .ctx-sess-row .ic { width: 18px; height: 18px; } .ctx-sess-name { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .ctx-sess-name b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ctx-sess-name b.raw { font-family: var(--code-font, var(--code)); font-weight: 500; letter-spacing: .02em; } .ctx-sess-name code { font-family: var(--code-font, var(--code)); font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ctx-sess-row .ctx-spark { height: 24px; } .ctx-sess-peak { justify-self: end; font-weight: 600; } .ctx-sess-peak.ok { color: var(--green); } .ctx-sess-peak.warn { color: var(--amber); } .ctx-sess-peak.bad { color: var(--red); } .ctx-sess-meta, .ctx-sess-when { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ctx-sess-when { text-align: right; } .ctx-sess.open { background: var(--card-2); } .ctx-sess.open > .ctx-card { margin: 0 12px 12px; } @media (max-width: 640px) { .ctx-sess-row { grid-template-columns: 20px minmax(0, 1fr) 64px 40px; } .ctx-sess-meta, .ctx-sess-when { display: none; } .ctx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ctx-scores { grid-template-columns: 1fr; } .ctx-top { grid-template-columns: 1fr; } } .ctx-none { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 48px 16px; color: var(--muted); font-size: 12.5px; text-align: center; background: var(--card); border: 1px dashed var(--line); border-radius: 14px; } .ctx-none b { color: var(--fg); font-size: 13.5px; font-weight: 600; } @media (prefers-reduced-motion: reduce) { .ctx-waffle > i, .ctx-bar i, .ctx-ring .arc, .ctx-state.live i { animation: none; } .ctx-waffle > i { transition: none; } } /* Safari 15: no color-mix, so the free cells and the line's area are tinted by opacity */ @supports not (color: color-mix(in srgb, red 50%, blue)) { :root { --k-free: rgba(128, 128, 128, .12); } i.dot.free { box-shadow: inset 0 0 0 1px var(--line); } .ctx-spark .area { fill: var(--k-chat); fill-opacity: .14; } .ctx-spark .hit:hover { fill: var(--line); } } /* tuned for you */ .ctx-tune { gap: 10px; } .ctx-tune-total { font-size: 12px; font-weight: 600; color: var(--green); background: var(--green-soft); border-radius: 11px; padding: 3px 10px; white-space: nowrap; } .ctx-tune-row { display: flex; flex-direction: column; gap: 10px; padding: 14px 0 4px; border-top: 1px solid var(--line); min-width: 0; } .ctx-tune-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .ctx-tune-title b { font-size: 13px; font-weight: 600; flex: none; } .ctx-tunes { align-items: start; } .ctx-tunes > :only-child { grid-column: 1 / -1; } .ctx-tune-title code { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .ctx-tune-vals { display: flex; align-items: flex-end; gap: 12px; min-width: 0; } .ctx-tune-val { display: flex; flex-direction: column; gap: 2px; flex: none; } .ctx-tune-val .ctx-k { font-size: 9.5px; } .ctx-tune-val b { font-size: 18px; font-weight: 600; letter-spacing: -.01em; } .ctx-tune-val.now b { color: var(--fg-2); } .ctx-tune-row:not(.done) .ctx-tune-val.now b { text-decoration: line-through; text-decoration-color: var(--muted); text-decoration-thickness: 1px; color: var(--muted); } .ctx-tune-val.best b { color: var(--green); } .ctx-tune-arrow { color: var(--muted); font-size: 14px; padding-bottom: 3px; } .ctx-tune-chart { position: relative; height: 112px; margin: 2px 6px 0; cursor: default; } .ctx-tc-plot { position: absolute; inset: 0 0 18px; } .ctx-tc-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .ctx-tune-chart .hot { stop-color: var(--red); stop-opacity: .32; } .ctx-tune-chart .cool { stop-color: var(--red); stop-opacity: .02; } .ctx-tune-chart .level { stroke: var(--green); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; opacity: .7; } .ctx-tune-chart .line { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .ctx-tc-plot svg { animation: ctx-draw 1s var(--ease, ease) backwards; } @keyframes ctx-draw { from { clip-path: inset(-20px 100% -20px 0); } to { clip-path: inset(-20px 0 -20px 0); } } @keyframes ctx-pop { from { opacity: 0; transform: scale(.4); } } .ctx-tc-dot { animation: ctx-pop .35s .8s var(--ease, ease) backwards; } .ctx-tc-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; border: 2px solid var(--card); box-sizing: border-box; } .ctx-tc-dot.now { background: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 22%, transparent); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; } .ctx-tc-dot.worst { background: color-mix(in srgb, var(--red) 55%, var(--card)); } .ctx-tc-dot.best { background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 22%, transparent), 0 0 14px color-mix(in srgb, var(--green) 60%, transparent); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; } .ctx-tc-tag { position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--red); letter-spacing: -.01em; } .ctx-tc-dot.best .ctx-tc-tag { color: var(--green); } .ctx-tc-dot.worst .ctx-tc-tag { font-weight: 600; opacity: .8; } .ctx-tc-tag.start { left: -4px; transform: none; } .ctx-tc-tag.end { left: auto; right: -4px; transform: none; } .ctx-tc-x { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; font-size: 10px; color: var(--muted); } .ctx-tc-x span { position: absolute; transform: translateX(-50%); white-space: nowrap; } .ctx-tc-x span.start { transform: none; margin-left: -6px; } .ctx-tc-x span.end { transform: translateX(-100%); margin-left: 6px; } .ctx-tc-x span.best { color: var(--green); font-weight: 600; } .ctx-tc-x span.now { color: var(--red); font-weight: 600; } .ctx-pane.tune-still .ctx-tune-chart :is(svg, .ctx-tc-dot) { animation: none; } @media (prefers-reduced-motion: reduce) { .ctx-tune-chart :is(svg, .ctx-tc-dot) { animation: none; } } .ctx-tune-note { padding: 0 4px 12px; } .ctx-tune-why { margin: 0; font-size: 12px; line-height: 1.5; color: var(--fg-2); } /* what the advice doesn't weigh (#1854), quieter than the facts it follows */ .ctx-tune-caveat { margin: -4px 0 0; font-size: 11px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; } .ctx-tune-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } .ctx-tune-src { font-size: 11px; color: var(--muted); margin-top: -7px; overflow-wrap: anywhere; } .ctx-tune-foot .grow { flex: 1; } /* a part, a cell or an item clicked opens its text (masaka on Discord) */ .ctx-click { cursor: pointer; } .ctx-leg.ctx-click { border-radius: 5px; } .ctx-click:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: 1px; } .ctx-waffle > i:not(.free) { cursor: pointer; } .modal .dialog.wide { width: min(880px, 100%); } .modal .editor.ctx-view { height: min(760px, calc(100vh - 80px)); } .modal .editor.ctx-view > .ehead { gap: 8px; } .modal .editor.ctx-view > .ehead b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ctx-view-total { flex: none; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .modal .editor.ctx-view > .ebody { display: block; } .ctx-view-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .ctx-view-note { margin: 0; font-size: 11.5px; color: var(--muted); } .ctx-view-wait, .ctx-view-gone { margin: 0; padding: 12px 0; font-size: 12px; color: var(--muted); } .ctx-vi-list { display: flex; flex-direction: column; gap: 2px; } .ctx-vi { min-width: 0; border-radius: 8px; } .ctx-vi.open { background: color-mix(in srgb, var(--fg) 3%, transparent); } .ctx-vi-head { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--fg); font: inherit; font-size: 12px; text-align: left; cursor: pointer; } .ctx-vi-head:hover { background: var(--pill); } .ctx-vi-head .grow { flex: 1; } .ctx-vi-head .ctx-name { min-width: 0; } .ctx-vi-head .tw { display: inline-flex; width: 10px; flex: none; color: var(--faint); } .ctx-vi-head .tw svg { transform: rotate(-90deg); transition: transform .2s var(--ease, ease); } .ctx-vi.open > .ctx-vi-head .tw svg { transform: none; } .ctx-vi-text { display: flex; flex-direction: column; gap: 10px; padding: 4px 8px 10px 26px; min-width: 0; } .ctx-piece { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ctx-piece-head { display: flex; align-items: center; gap: 6px; min-height: 22px; } .ctx-piece-head .grow { flex: 1; } .ctx-role { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .ctx-piece-name { font-family: var(--code-font, var(--code)); font-size: 11px; color: var(--fg-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ctx-piece-note { font-size: 11.5px; color: var(--muted); } .ctx-text-box { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .ctx-text { margin: 0; width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 6px; background: var(--pill); font-family: var(--code-font, var(--code)); font-size: 11.5px; line-height: 1.5; color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; } .ctx-text-more[hidden] { display: none; } .ctx-view-all { margin-right: auto; } /* 供应商与模型列表 (Providers & Models - Magpie 原生风格) */ .mp-pv-card-panel { background: var(--bg-card, #161618); border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08)); border-radius: 12px; overflow: hidden; } .mp-pv-table { display: flex; flex-direction: column; } .mp-pv-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; border-bottom: 1px solid var(--border-faint, rgba(255, 255, 255, 0.05)); transition: background-color .15s ease; } .mp-pv-row:last-child { border-bottom: none; } .mp-pv-row:hover { background: rgba(255, 255, 255, 0.025); } .mp-pv-row.off { opacity: 0.55; } .mp-pv-icon-wrap { width: 32px; height: 32px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(255, 255, 255, 0.05); } .mp-pv-icon-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; } .mp-pv-icon-wrap .mp-icon-mask { width: 20px; height: 20px; } .mp-icon-mask { display: block; width: 100%; height: 100%; background-color: #ffffff; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .mp-icon-generic { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--text-soft, #a1a1aa); } .mp-pv-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .mp-pv-name { font-size: 13.5px; font-weight: 600; color: var(--text-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mp-pv-sub { font-size: 11.5px; color: var(--text-dim, #8a8a93); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mp-pv-right { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; } .mp-pv-uses { display: flex; align-items: center; gap: 6px; } .mp-pv-use-badge { width: 26px; height: 26px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; flex: none; } .mp-pv-use-badge .mp-icon-mask { width: 15px; height: 15px; } .mp-pv-use-badge img { width: 16px; height: 16px; object-fit: contain; } .mp-pv-status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-soft); white-space: nowrap; flex: none; max-width: 180px; overflow: hidden; text-overflow: ellipsis; padding: 3px 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 6px; } .mp-pv-status-pill.mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px; } .mp-pv-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-green, #6ec89a); flex: none; } .mp-pv-status-dot.off { background: var(--text-dim); } @media (max-width: 640px) { .mp-pv-row { padding: 8px 10px; gap: 10px; } .mp-pv-status-pill { max-width: 130px; font-size: 11px; padding: 2px 6px; gap: 4px; } .mp-pv-status-pill.mono { font-size: 10.5px; } .mp-pv-right { gap: 6px; } .mp-pv-use-badge { width: 22px; height: 22px; } .mp-pv-use-badge img { width: 14px; height: 14px; } .mp-pv-chev { display: none; } } /* KPI 统计卡片条 */ .agent-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; } .agent-kpi-card { background: var(--bg-card, rgba(255,255,255,.025)); border: 1px solid var(--border-faint); border-radius: 9px; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; } .agent-kpi-val { font-size: 18px; font-weight: 700; color: var(--text-title); display: flex; align-items: center; gap: 6px; } .agent-kpi-val small { font-size: 11px; font-weight: 400; color: var(--text-soft); } .agent-kpi-lbl { font-size: 11px; color: var(--text-soft); } /* 低额度预警横幅 */ .agent-low-quota-banner { background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .25); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; } .agent-low-quota-head { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; color: #f87171; margin-bottom: 6px; } .agent-low-quota-list { display: flex; flex-direction: column; gap: 4px; } .agent-low-quota-item { font-size: 12px; color: var(--text-body); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .agent-low-quota-item b { color: #fbbf24; } /* Agent 卡片 */ .agent-card { background: var(--bg-card, rgba(255,255,255,.025)); border: 1px solid var(--border-subtle, rgba(255,255,255,.08)); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; transition: all .15s ease; } .agent-card:hover { border-color: var(--border-faint, rgba(255,255,255,.18)); } .agent-card-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .agent-card-title-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .agent-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: #6b7280; } .agent-status-dot.on { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, .6); } .agent-status-dot.idle { background: #3b82f6; } .agent-aname { font-size: 15px; font-weight: 600; color: var(--text-title); letter-spacing: -.2px; } .agent-pill { padding: 2px 7px; border-radius: 5px; font-size: 11px; font-weight: 500; } .agent-pill.run { background: rgba(34, 197, 94, .12); color: #4ade80; border: 1px solid rgba(34, 197, 94, .25); } .agent-pill.idle { background: rgba(148, 163, 184, .1); color: var(--text-soft); border: 1px solid var(--border-faint); } .agent-pill.none { background: transparent; color: var(--text-ghost); border: 1px dashed var(--border-faint); } .agent-acc-badge { font-size: 11px; color: var(--text-soft); background: var(--bg-hover, rgba(128,128,128,.1)); padding: 2px 7px; border-radius: 5px; border: 1px solid var(--border-faint); } /* 额度进度条可视化 */ .agent-quota-box { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-faint); } .agent-quota-title { font-size: 11.5px; font-weight: 600; color: var(--text-soft); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; } .agent-bucket-row { margin-bottom: 8px; } .agent-bucket-row:last-child { margin-bottom: 0; } .agent-bucket-meta { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 3px; color: var(--text-body); } .agent-bucket-meta .reset-txt { font-size: 11px; color: var(--text-ghost); } .agent-bar-track { width: 100%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; } .agent-bar-fill { height: 100%; border-radius: 3px; transition: width .3s ease; } .agent-bar-fill.high { background: #22c55e; } .agent-bar-fill.mid { background: #f59e0b; } .agent-bar-fill.low { background: #ef4444; } /* 活跃进程与会话列表 */ .agent-procs-list { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; } .agent-proc-item { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; padding: 5px 9px; border-radius: 6px; background: rgba(0,0,0,.12); font-size: 11.5px; } .agent-proc-pid { font-family: ui-monospace, Menlo, monospace; font-weight: 600; color: #38bdf8; } .agent-proc-cwd { font-family: ui-monospace, Menlo, monospace; color: var(--text-soft); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .agent-proc-res { color: var(--text-ghost); } /* 智能体底层环境栏 */ .agent-env-section { margin-top: 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-faint); background: var(--bg-card, rgba(255,255,255,.025)); } .agent-env-head { font-size: 12.5px; font-weight: 600; color: var(--text-title); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .agent-env-grid { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .agent-env-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: rgba(0,0,0,.18); border: 1px solid var(--border-faint); font-size: 12px; } .agent-env-chip b { color: var(--text-title); } .agent-env-chip span { font-family: ui-monospace, Menlo, monospace; color: #93c5fd; } /* --- 首页四大中枢 Portal 概览网格 --- */ .hp-portal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 14px; } @media (max-width: 860px) { .hp-portal-grid { grid-template-columns: 1fr; gap: 12px; } } .hp-portal-card { display: flex; flex-direction: column; min-width: 0; /* 栅格/弹性子项: 阻止 nowrap 长文(如提交信息)撑宽轨道, 移动端右侧圆角不再被裁 */ padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-soft, rgba(255,255,255,.08)); background: var(--bg-card, rgba(255,255,255,.025)); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.2)); transition: border-color .15s ease, background .15s ease; } .hp-portal-card:hover { border-color: var(--border-hover, rgba(255,255,255,.16)); } .hp-portal-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border-faint, rgba(255,255,255,.06)); } .hp-portal-title { display: flex; align-items: center; gap: 8px; } .hp-portal-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.06); } .hp-portal-title h3 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text-title, #fff); letter-spacing: -0.2px; } .hp-portal-badge { font-size: 11px; font-weight: 500; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--text-soft, rgba(255,255,255,.65)); } .hp-portal-jump { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: #38bdf8; background: transparent; border: 1px solid transparent; cursor: pointer; padding: 3px 8px; border-radius: 6px; transition: all .15s ease; } .hp-portal-jump:hover { background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.25); } .hp-portal-body { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 120px; } /* 1. 活动概览条目 */ .hp-act-row { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.15); border: 1px solid var(--border-faint, rgba(255,255,255,.04)); cursor: pointer; transition: background .15s ease, border-color .15s ease; } .hp-act-row:hover { background: rgba(255,255,255,.04); border-color: var(--border-soft, rgba(255,255,255,.1)); } .hp-act-topline { display: flex; align-items: center; gap: 6px; font-size: 12px; } .hp-act-repo { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; background: var(--rc-bg, rgba(255,255,255,.08)); color: var(--rc-col, #38bdf8); border: 1px solid var(--rc-bd, rgba(255,255,255,.12)); } .hp-act-author { color: var(--text-soft, rgba(255,255,255,.6)); font-size: 11.5px; } .hp-act-time { margin-left: auto; color: var(--text-dead, rgba(255,255,255,.4)); font-size: 11px; font-family: ui-monospace, Menlo, monospace; } .hp-act-msg { font-size: 12.5px; color: var(--text-main, #eee); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } /* 2. Tmux 概览条目 */ .hp-tmux-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.15); border: 1px solid var(--border-faint, rgba(255,255,255,.04)); cursor: pointer; transition: background .15s ease; } .hp-tmux-row:hover { background: rgba(255,255,255,.04); } .hp-tmux-info { display: flex; flex-direction: column; gap: 3px; overflow: hidden; } .hp-tmux-name { font-size: 13px; font-weight: 600; color: var(--text-title, #fff); display: flex; align-items: center; gap: 6px; } .hp-tmux-sub { font-size: 11.5px; color: var(--text-soft, rgba(255,255,255,.6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hp-tmux-badge { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: rgba(56, 189, 248, 0.12); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.25); flex-shrink: 0; } /* 3. 服务概览磁贴网格 */ .hp-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; } .hp-svc-chip { display: flex; flex-direction: column; gap: 3px; padding: 7px 9px; border-radius: 8px; background: rgba(0,0,0,.18); border: 1px solid var(--border-faint, rgba(255,255,255,.05)); text-decoration: none; color: inherit; transition: all .15s ease; } .hp-svc-chip:hover { background: rgba(255,255,255,.05); border-color: rgba(74, 222, 128, 0.35); transform: translateY(-1px); } .hp-svc-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; } .hp-svc-name { font-weight: 600; color: var(--text-title, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hp-svc-port { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #4ade80; } .hp-svc-res { font-size: 10.5px; color: var(--text-dead, rgba(255,255,255,.45)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 4. Agent 概览卡 */ .hp-agent-summary { display: flex; flex-direction: column; gap: 8px; } .hp-agent-kpis { display: flex; gap: 8px; flex-wrap: wrap; } .hp-agent-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 6px; background: rgba(0,0,0,.2); border: 1px solid var(--border-faint, rgba(255,255,255,.06)); font-size: 11.5px; } .hp-agent-pill b { color: #fff; } .hp-agent-pill.green { border-color: rgba(74, 222, 128, 0.25); color: #4ade80; } .hp-agent-pill.warn { border-color: rgba(248, 113, 113, 0.3); color: #f87171; background: rgba(248, 113, 113, 0.08); } .hp-agent-procs { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; } .hp-agent-proc-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: 6px; background: rgba(0,0,0,.15); font-size: 11.5px; border: 1px solid var(--border-faint, rgba(255,255,255,.04)); } .hp-agent-proc-name { font-weight: 600; color: #a78bfa; } .hp-agent-proc-detail { color: var(--text-dead, rgba(255,255,255,.5)); font-family: ui-monospace, Menlo, monospace; font-size: 11px; } /* Agent 详情全屏滑层 / 面板 (风格同 traj-sheet，体验流畅，无任何 popup 弹窗困扰) */ .agent-sheet { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 70; background: var(--bg, #0d1117); overflow: hidden; } .agent-sheet[hidden] { display: none !important; } .agent-sheet.opening { animation: agentSheetFade .2s ease; } @keyframes agentSheetFade { from { opacity: 0; } to { opacity: 1; } } .agent-sheet-top { display: flex; align-items: center; gap: 12px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; border-bottom: 1px solid var(--border-faint, rgba(255,255,255,.08)); } .agent-sheet-title-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .agent-sheet-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-title); letter-spacing: -.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .agent-sheet-sub { font-size: 11px; color: var(--text-soft); font-family: ui-monospace, Menlo, monospace; } .agent-sheet-nav { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: rgba(0,0,0,.15); border-bottom: 1px solid var(--border-faint, rgba(255,255,255,.06)); overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .agent-sheet-nav .chip { font-size: 12px; padding: 4px 11px; cursor: pointer; user-select: none; } .agent-sheet-body { /* 绝对定位钉在页签下方到屏幕底。不要用 height:0 + flex 撑开， 那个组合在开着开发者工具时会保持 0 高，正文被裁成一片黑。 */ position: absolute; left: 0; right: 0; top: 132px; bottom: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 20px calc(32px + env(safe-area-inset-bottom)); } /* 详情分区样式 */ .ad-section { display: flex; flex-direction: column; gap: 8px; } .ad-sec-title { font-size: 13px; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 6px; } .ad-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .ad-info-card { background: rgba(0,0,0,.18); border: 1px solid var(--border-faint, rgba(255,255,255,.06)); border-radius: 9px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } .ad-info-label { font-size: 11px; color: var(--text-ghost); } .ad-info-val { font-size: 13px; font-weight: 600; color: var(--text-title); word-break: break-all; } .ad-fallback-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .ad-fallback-chip { font-size: 11px; padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,.05); border: 1px solid var(--border-faint); color: var(--text-soft); } /* Skills 矩阵 */ .ad-skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .ad-skill-card { background: rgba(0,0,0,.15); border: 1px solid var(--border-faint, rgba(255,255,255,.06)); border-radius: 9px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; transition: border-color .15s ease; } .ad-skill-card:hover { border-color: rgba(168, 85, 247, .4); } .ad-skill-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ad-skill-name { font-size: 12.5px; font-weight: 600; color: #c084fc; } .ad-skill-cat { font-size: 10.5px; padding: 1px 6px; border-radius: 4px; background: rgba(168, 85, 247, .12); color: #c084fc; } .ad-skill-desc { font-size: 11.5px; color: var(--text-soft); line-height: 1.4; } /* 平台与网关 */ .ad-platform-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 8px; background: rgba(0,0,0,.16); border: 1px solid var(--border-faint); } .ad-platform-name { font-size: 13px; font-weight: 600; color: var(--text-title); display: flex; align-items: center; gap: 8px; } .ad-platform-badge { font-size: 11px; padding: 2px 7px; border-radius: 5px; font-weight: 500; } .ad-platform-badge.connected { background: rgba(34, 197, 94, .12); color: #4ade80; border: 1px solid rgba(34, 197, 94, .25); } /* 记忆与设定 */ .ad-memory-box { background: rgba(0,0,0,.15); border: 1px solid var(--border-faint); border-radius: 9px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .ad-memory-head { display: flex; align-items: center; justify-content: space-between; } .ad-memory-title { font-size: 13px; font-weight: 600; color: #38bdf8; } .ad-memory-count { font-size: 11px; color: var(--text-ghost); } .ad-memory-items { display: flex; flex-direction: column; gap: 6px; } .ad-memory-item { font-size: 12px; line-height: 1.45; color: var(--text-body); padding: 6px 8px; background: rgba(255,255,255,.02); border-radius: 6px; border-left: 2px solid #38bdf8; } /* Cron 任务 */ .ad-cron-card { background: rgba(0,0,0,.15); border: 1px solid var(--border-faint); border-radius: 9px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } .ad-cron-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ad-cron-name { font-size: 13px; font-weight: 600; color: #fbbf24; } .ad-cron-sched { font-family: ui-monospace, Menlo, monospace; font-size: 11px; background: rgba(251, 191, 36, .12); color: #fbbf24; padding: 2px 7px; border-radius: 4px; } .ad-cron-prompt { font-size: 11.5px; color: var(--text-soft); line-height: 1.45; background: rgba(0,0,0,.2); padding: 8px 10px; border-radius: 6px; border: 1px dashed var(--border-faint); max-height: 120px; overflow-y: auto; } .ad-cron-meta { display: flex; gap: 12px; font-size: 11px; color: var(--text-ghost); flex-wrap: wrap; } /* ---------------- Tmux 全屏/沉浸式实时终端滑层 (Tmux Terminal Sheet) ---------------- */ .tmux-sheet { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 75; background: #080a0e; overflow: hidden; display: flex; flex-direction: column; } .tmux-sheet[hidden] { display: none !important; } .tmux-sheet.opening { animation: agentSheetFade .18s ease; } .tmux-sheet-top { display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 14px 8px; border-bottom: 1px solid var(--border-faint, rgba(255,255,255,.08)); background: rgba(13,17,23,.92); backdrop-filter: blur(8px); flex-shrink: 0; } .tmux-sheet-title-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tmux-sheet-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-title, #fff); letter-spacing: -.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tmux-sheet-pane-badge { font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 1px 6px; border-radius: 4px; background: rgba(56, 189, 248, .15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, .25); } .tmux-sheet-sub { font-size: 11px; color: var(--text-ghost, rgba(255,255,255,.45)); font-family: ui-monospace, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tmux-sheet-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .btn-tmux-sheet-act { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.06); border: 1px solid var(--border-faint, rgba(255,255,255,.08)); color: var(--text-soft, rgba(255,255,255,.75)); border-radius: 6px; padding: 4px 8px; font-size: 11.5px; cursor: pointer; transition: all .15s ease; user-select: none; } .btn-tmux-sheet-act:hover { background: rgba(255,255,255,.1); color: #fff; } .btn-tmux-sheet-act.active { background: rgba(56, 189, 248, .15); color: #38bdf8; border-color: rgba(56, 189, 248, .3); } .tmux-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #64748b; display: inline-block; } .tmux-live-dot.on { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, .7); animation: liveDotPulse 2s infinite ease-in-out; } @keyframes liveDotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.85); } } .tmux-sheet-select { background: rgba(0,0,0,.35); border: 1px solid var(--border-faint, rgba(255,255,255,.1)); color: var(--text-soft, rgba(255,255,255,.75)); font-size: 11px; padding: 3px 6px; border-radius: 6px; outline: none; cursor: pointer; } .tmux-sheet-tabs { display: flex; align-items: center; gap: 6px; padding: 6px 14px; background: rgba(0,0,0,.25); border-bottom: 1px solid var(--border-faint, rgba(255,255,255,.06)); overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; flex-shrink: 0; } .tmux-sheet-tabs:empty { display: none; } .tmux-sheet-tab { font-size: 11.5px; padding: 3px 9px; border-radius: 5px; background: rgba(255,255,255,.05); border: 1px solid var(--border-faint, rgba(255,255,255,.06)); color: var(--text-soft, rgba(255,255,255,.7)); cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 4px; } .tmux-sheet-tab:hover { background: rgba(255,255,255,.08); color: #fff; } .tmux-sheet-tab.active { background: rgba(56, 189, 248, .15); border-color: rgba(56, 189, 248, .35); color: #38bdf8; font-weight: 600; } .tmux-sheet-body { flex: 1 1 auto; position: relative; overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #06090e; padding: 10px 14px calc(24px + env(safe-area-inset-bottom)); } .tmux-fullscreen-pre { margin: 0; padding: 0; font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; color: #e6edf3; white-space: pre-wrap; word-break: break-all; } .tmux-fullscreen-pre code { font-family: inherit; } .tmux-sheet-scroll-btn { position: absolute; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 5px; background: rgba(15, 23, 42, .88); color: #38bdf8; border: 1px solid rgba(56, 189, 248, .4); padding: 6px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 500; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.5); backdrop-filter: blur(6px); z-index: 10; transition: all .15s ease; } .tmux-sheet-scroll-btn:hover { background: rgba(56, 189, 248, .2); } /* 终端 ANSI 颜色着色类 */ .ansi-bold { font-weight: 700; } .ansi-dim { opacity: 0.65; } .ansi-italic { font-style: italic; } .ansi-underline { text-decoration: underline; } .ansi-fg-black { color: #484f58; } .ansi-fg-red { color: #ff7b72; } .ansi-fg-green { color: #7ee787; } .ansi-fg-yellow { color: #d29922; } .ansi-fg-blue { color: #58a6ff; } .ansi-fg-magenta { color: #bc8cff; } .ansi-fg-cyan { color: #39c5cf; } .ansi-fg-white { color: #d0d7de; } .ansi-fg-bright-black { color: #6e7681; } .ansi-fg-bright-red { color: #ffa198; } .ansi-fg-bright-green { color: #56d364; } .ansi-fg-bright-yellow { color: #e3b341; } .ansi-fg-bright-blue { color: #79c0ff; } .ansi-fg-bright-magenta { color: #d2a8ff; } .ansi-fg-bright-cyan { color: #56d4dd; } .ansi-fg-bright-white { color: #f0f6fc; } .ansi-bg-black { background-color: #21262d; } .ansi-bg-red { background-color: rgba(255, 123, 114, 0.2); } .ansi-bg-green { background-color: rgba(126, 231, 135, 0.2); } .ansi-bg-yellow { background-color: rgba(210, 153, 34, 0.2); } .ansi-bg-blue { background-color: rgba(88, 166, 255, 0.2); } .ansi-bg-magenta { background-color: rgba(188, 140, 255, 0.2); } .ansi-bg-cyan { background-color: rgba(57, 197, 207, 0.2); } .ansi-bg-white { background-color: rgba(208, 215, 222, 0.2); } /* ================================================================ 概览 Agent 卡片组 (多维度额度进度条) ================================================================ */ .hp-ag-item { padding: 10px 6px; border-bottom: 1px solid var(--bd); cursor: pointer; border-radius: 6px; transition: background 0.12s; } .hp-ag-item:last-child { border-bottom: none; } .hp-ag-item:hover, .hp-ag-item:focus-visible { background: var(--bg2); outline: none; } .hp-ag-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .hp-ag-title-wrap { display: flex; align-items: center; gap: 7px; min-width: 0; } .hp-ag-name { font-weight: 600; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hp-ag-procs { font-size: 11px; color: var(--text-soft); background: var(--bg); border: 1px solid var(--bd); padding: 1px 6px; border-radius: 10px; white-space: nowrap; } .hp-ag-cwds { display: flex; gap: 4px; overflow: hidden; } .hp-ag-cwd { font-size: 11px; color: var(--text-soft); background: var(--bg2); border-radius: 4px; padding: 1px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; } .hp-ag-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 7px 16px; } .hp-bucket-row { display: flex; flex-direction: column; gap: 3px; } .hp-bucket-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; line-height: 1.3; } .hp-bucket-name { color: var(--text-soft); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; } .hp-bucket-right { display: flex; align-items: center; gap: 5px; } .hp-bucket-reset { font-size: 10px; color: var(--text-dead); } .hp-bucket-val { font-weight: 700; font-size: 11.5px; font-variant-numeric: tabular-nums; } .hp-bucket-val.high { color: var(--green); } .hp-bucket-val.mid { color: #f59e0b; } .hp-bucket-val.low { color: var(--red); } .hp-bucket-track { width: 100%; height: 5px; background: rgba(125, 125, 125, 0.16); border-radius: 3px; overflow: hidden; } .hp-bucket-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; } .hp-bucket-fill.high { background: #22c55e; } .hp-bucket-fill.mid { background: #f59e0b; } .hp-bucket-fill.low { background: #ef4444; } .hp-ag-noquota { font-size: 11px; color: var(--text-dead); padding: 2px 0; } /* ================================================================ Goal 「▶ 恢复运行」按钮 (Plan C) ================================================================ */ .g-resume-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 6px; border: none; cursor: pointer; background: #16a34a; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.2; transition: background .15s, opacity .15s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .g-resume-btn:hover { background: #15803d; } .g-resume-btn:active { background: #14532d; } .g-resume-btn:disabled { opacity: .5; cursor: not-allowed; } .g-resume-btn.ok { background: #374151; } @media (max-width: 480px) { .g-resume-btn { padding: 6px 14px; font-size: 13px; } } /* ================================================================ Tmux 会话与智能体任务中枢扩展样式 (融合 Goal 与独立后台进程) ================================================================ */ .tmux-section-divider { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-size: 13px; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.5px; } .tmux-section-divider::after { content: ""; flex: 1; height: 1px; background: var(--bd); } .tmux-goal-banner-acts { display: flex; align-items: center; gap: 6px; margin-left: auto; } .tmux-resumable-card { border-left: 3px solid #f97316; background: linear-gradient(180deg, rgba(249, 115, 22, 0.03) 0%, transparent 100%); } .tmux-resumable-desc { margin-top: 8px; padding: 8px 10px; background: var(--bg2); border-radius: 6px; font-size: 12.5px; color: var(--text-soft); line-height: 1.4; word-break: break-all; } .tmux-standalone-card { border-left: 3px solid #ec4899; } .tmux-proc-cmd-box { margin-top: 8px; padding: 6px 10px; background: var(--bg2); border-radius: 6px; font-size: 11.5px; overflow-x: auto; } .tmux-proc-cmd-box code { color: #f472b6; font-family: monospace; } /* 智能推进唤醒按钮高亮样式 */ .btn-tmux-wake { background: rgba(245, 158, 11, 0.16) !important; color: #fbbf24 !important; border: 1px solid rgba(245, 158, 11, 0.38) !important; font-weight: 600 !important; } .btn-tmux-wake:hover { background: rgba(245, 158, 11, 0.28) !important; border-color: rgba(245, 158, 11, 0.6) !important; } .btn-tmux-wake.working { opacity: 0.75; cursor: wait; } .btn-tmux-wake.success { background: rgba(34, 197, 94, 0.22) !important; color: #4ade80 !important; border-color: rgba(34, 197, 94, 0.5) !important; } /* 提交卡片作者头像与评论紧凑布局 */ .act-author-wrap { display: inline-flex; align-items: center; gap: 5px; } .act-avatar-badge { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 1; text-transform: uppercase; flex-shrink: 0; } /* --- Tailscale 网络与服务中枢样式 --- */ .ts-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .ts-header h2 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; } .ts-header-actions { display: flex; gap: 6px; } .btn-ts-action { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border-soft, rgba(255,255,255,0.08)); background: var(--bg-card, rgba(30,34,42,0.6)); color: var(--fg, #e2e8f0); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .btn-ts-action:active { transform: scale(0.96); opacity: 0.8; } .ts-card { background: var(--bg-card, rgba(26,29,36,0.7)); border: 1px solid var(--border-soft, rgba(255,255,255,0.08)); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; backdrop-filter: blur(12px); } .ts-self-card { border-left: 3px solid #3b82f6; } .ts-self-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .ts-self-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; } .ts-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 600; } .ts-badge.running { background: rgba(16, 185, 129, 0.15); color: #10b981; } .ts-self-ips { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--font-mono, monospace); font-size: 11px; } .ts-ip-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(0,0,0,0.25); padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.05); cursor: pointer; } .ts-ip-chip:hover { background: rgba(255,255,255,0.08); } .ts-dns-text { font-size: 11px; color: var(--fg-dim, #94a3b8); margin-top: 6px; display: flex; align-items: center; gap: 4px; word-break: break-all; } .ts-sec-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--fg-dim, #cbd5e1); margin: 14px 0 8px 2px; } /* Serve 代理网格 */ .ts-serve-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; } .ts-serve-card { background: var(--bg-card, rgba(26,29,36,0.6)); border: 1px solid var(--border-soft, rgba(255,255,255,0.07)); border-radius: 10px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; } .ts-serve-info { min-width: 0; flex: 1; } .ts-serve-path { font-family: var(--font-mono, monospace); font-size: 12.5px; font-weight: 700; color: #60a5fa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ts-serve-proxy { font-size: 10.5px; color: var(--fg-dim, #94a3b8); margin-top: 2px; } .ts-serve-btns { display: flex; gap: 5px; margin-left: 8px; } .btn-ts-mini { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border-soft, rgba(255,255,255,0.1)); background: rgba(255,255,255,0.06); color: var(--fg, #f8fafc); font-size: 10.5px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; } .btn-ts-mini:active { transform: scale(0.95); } /* Peers 设备卡片列表 */ .ts-peers-list { display: flex; flex-direction: column; gap: 8px; } .ts-peer-card { background: var(--bg-card, rgba(26,29,36,0.6)); border: 1px solid var(--border-soft, rgba(255,255,255,0.07)); border-radius: 10px; padding: 10px 12px; transition: border-color 0.2s; } .ts-peer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .ts-peer-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; } .ts-os-badge { font-size: 9.5px; padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,0.08); color: #94a3b8; font-weight: 600; text-transform: uppercase; } .ts-conn-pill { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; display: inline-flex; align-items: center; gap: 4px; } .ts-conn-pill.direct { background: rgba(16, 185, 129, 0.15); color: #10b981; } .ts-conn-pill.relay { background: rgba(245, 158, 11, 0.15); color: #f59e0b; } .ts-conn-pill.offline { background: rgba(148, 163, 184, 0.12); color: #94a3b8; } .ts-peer-detail { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .ts-peer-ip { font-family: var(--font-mono, monospace); font-size: 11.5px; color: #cbd5e1; } .ts-peer-traffic { font-size: 10.5px; color: var(--fg-dim, #64748b); } .ts-peer-actions { display: flex; align-items: center; gap: 5px; margin-top: 6px; } .ts-ping-res { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: rgba(16, 185, 129, 0.12); color: #10b981; margin-left: 4px; } .ts-ping-res.err { background: rgba(239, 68, 68, 0.15); color: #ef4444; } /* Netcheck 诊断卡片 */ .ts-netcheck-panel { background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 10px; padding: 12px; margin-bottom: 12px; animation: fadeIn 0.2s ease-out; } .ts-diag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 8px; } .ts-diag-item { background: rgba(255,255,255,0.04); padding: 8px; border-radius: 6px; text-align: center; } .ts-diag-label { font-size: 10px; color: var(--fg-dim, #94a3b8); margin-bottom: 2px; } .ts-diag-val { font-size: 12px; font-weight: 700; } .ts-diag-val.ok { color: #10b981; } .ts-diag-val.warn { color: #f59e0b; } /* --- 服务管理面板 (Manage Panel) --- */ .manage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 8px; } .manage-card { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .manage-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .manage-card-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; } .manage-card-desc { color: var(--text-soft); font-size: 11.5px; line-height: 1.4; } .manage-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border-faint); } .manage-card-status { font-size: 11px; color: var(--text-dim); font-family: ui-monospace, monospace; } .manage-card-btns { display: flex; align-items: center; gap: 6px; } .manage-card-btns .danger { color: var(--c-red, #e06c6c); } .manage-card-btns .primary { color: var(--c-green, #6ec89a); } .manage-audit-list { background: rgba(0, 0, 0, .25); border: 1px solid var(--border-faint); border-radius: 8px; padding: 8px 12px; max-height: 220px; overflow-y: auto; font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-dim); display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .manage-audit-item { white-space: pre-wrap; word-break: break-all; padding: 2px 0; border-bottom: 1px dashed rgba(255, 255, 255, .05); } .manage-audit-item:last-child { border-bottom: none; } .manage-paused-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; } /* 终端页面样式 */ .terminal-container { display: flex; flex-direction: column; height: 100%; background: var(--term-bg); border: 1px solid var(--term-bd); border-radius: 4px; overflow: hidden; } .terminal-header { display: flex; align-items: center; padding: 8px 12px; background: var(--bg-elev); border-bottom: 1px solid var(--border); } .terminal-title { flex: 1; font-weight: bold; color: var(--text-title); } .btn-terminal-action { background: var(--btn-bg); border: 1px solid var(--btn-border); color: var(--text); padding: 6px 10px; margin-left: 8px; border-radius: 4px; cursor: pointer; } .btn-terminal-action:hover { background: var(--btn-hover); } .terminal-body { flex: 1; overflow: auto; padding: 8px; } .terminal-pre { margin: 0; white-space: pre; word-wrap: normal; word-break: keep-all; } .terminal-code { font-family: ui-monospace, monospace; font-size: 12px; color: var(--term-tx); } .terminal-input-container { display: flex; align-items: center; padding: 8px 12px; background: var(--bg-input); border-top: 1px solid var(--border); } .terminal-prompt { color: var(--c-green); margin-right: 8px; font-family: ui-monospace, monospace; } .terminal-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-family: ui-monospace, monospace; font-size: 12px; } .manage-paused-table th { text-align: left; color: var(--text-ghost); font-weight: 400; padding: 4px 8px; border-bottom: 1px solid var(--border-soft); } .manage-paused-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-faint); vertical-align: middle; } .st-badge { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 500; } .st-badge.running { background: rgba(110, 200, 154, .18); color: #6ec89a; } .st-badge.blocked { background: rgba(229, 192, 123, .18); color: #e5c07b; } .st-badge.idle { background: rgba(150, 150, 150, .14); color: #888; } .st-badge.completed { background: rgba(97, 175, 239, .18); color: #61afef; } .btn-task-trigger { padding: 2px 8px; font-size: 11px; cursor: pointer; } .btn-tmux-preview.active { background: var(--bg-hover); color: var(--c-blue); } /* ---------------- Tmux 交互式终端与快速操作栏 (Interactive Terminal Bar) ---------------- */ .tmux-sheet-bar { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(13, 17, 23, .97); border-top: 1px solid var(--border-faint, rgba(255, 255, 255, .08)); backdrop-filter: blur(12px); z-index: 20; } .tmux-bar-keys { display: flex; align-items: center; gap: 6px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .tmux-bar-keys::-webkit-scrollbar { display: none; } .btn-term-key { display: inline-flex; align-items: center; justify-content: center; padding: 5px 11px; border-radius: 6px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); color: #cbd5e1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 600; cursor: pointer; user-select: none; touch-action: manipulation; transition: all .12s ease; } .btn-term-key:active { transform: scale(0.95); background: rgba(255, 255, 255, .16); } .btn-term-key.danger { color: #f87171; border-color: rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .12); } .btn-term-key.primary { color: #38bdf8; border-color: rgba(56, 189, 248, .35); background: rgba(56, 189, 248, .12); } .tmux-bar-input-row { display: flex; align-items: center; gap: 8px; } .tmux-term-input { flex: 1 1 auto; min-width: 0; height: 38px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; padding: 0 12px; color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; outline: none; transition: border-color .15s ease; } .tmux-term-input:focus { border-color: #38bdf8; box-shadow: 0 0 0 2px rgba(56, 189, 248, .2); } .btn-tmux-term-send { flex-shrink: 0; height: 38px; padding: 0 15px; border-radius: 8px; background: #0284c7; color: #fff; border: none; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; user-select: none; touch-action: manipulation; transition: all .15s ease; } .btn-tmux-term-send:active { transform: scale(0.96); background: #0369a1; } /* 终止/关闭会话按钮 */ .btn-tmux-sheet-act.danger, .btn-tmux-act.danger { color: #f87171 !important; } .btn-tmux-sheet-act.danger:hover, .btn-tmux-act.danger:hover { background: rgba(248, 113, 113, .18) !important; border-color: rgba(248, 113, 113, .35) !important; } /* ---------------- 新建智能体/终端弹层 (New Agent Modal) ---------------- */ .tmux-new-dialog { width: 92%; max-width: 520px; background: #0d1117; border: 1px solid var(--border-subtle, rgba(255, 255, 255, .14)); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .8); overflow: hidden; display: flex; flex-direction: column; } .tmux-new-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); } .tmux-new-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #f0f6fc; } .btn-tmux-close { background: transparent; border: none; color: var(--text-ghost, rgba(255, 255, 255, .45)); font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: all .15s; } .btn-tmux-close:hover { color: #fff; background: rgba(255, 255, 255, .08); } .tmux-new-body { padding: 16px 18px; overflow-y: auto; max-height: 72vh; display: flex; flex-direction: column; gap: 14px; } .tmux-agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; } .tmux-agent-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); cursor: pointer; user-select: none; transition: all .15s ease; position: relative; } .tmux-agent-card:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); } .tmux-agent-card.active { background: rgba(255, 255, 255, .08); border-color: var(--agent-accent, #38bdf8); box-shadow: 0 0 0 1px var(--agent-accent, #38bdf8), inset 0 0 12px rgba(56, 189, 248, .08); } .tmux-agent-icon { color: var(--agent-accent, #38bdf8); } .tmux-agent-name { font-weight: 700; font-size: 13px; color: #f0f6fc; } .tmux-agent-desc { font-size: 10.5px; color: var(--text-ghost, rgba(255, 255, 255, .45)); line-height: 1.25; } .tmux-cwd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .tmux-form-label { display: block; font-size: 12px; font-weight: 600; color: #94a3b8; margin-bottom: 6px; } .tmux-form-input, .tmux-form-textarea { width: 100%; box-sizing: border-box; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; padding: 8px 12px; color: #f0f6fc; font-size: 12.5px; font-family: ui-monospace, Menlo, monospace; outline: none; transition: border-color .15s; } .tmux-form-input:focus, .tmux-form-textarea:focus { border-color: #38bdf8; } .tmux-form-textarea { resize: vertical; min-height: 56px; font-family: inherit; } .tmux-new-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); } .btn-tmux-primary { background: #0284c7 !important; color: #fff !important; border: none !important; } .btn-tmux-primary:hover { background: #0369a1 !important; }