/* ============================================================ GroovyClaw 自定义样式: 参考 DeepSeek Harness 风格 - 白/极浅蓝灰表面, 近黑文字, DeepSeek 品牌蓝 #4176E6 主色 - 覆盖所有主题模式/主题名, 与主 CSS 同特异性(0-2-0), 本文件最后加载故级联胜出; 不依赖 JS - 2026.8.2 组件类名版本(旧 .chat-avatar/.agent-chat__avatar 已失效) ============================================================ */ /* —— logo/brand 图片保持原始比例, 不被拉伸 —— */ .topbar-brand__logo, .sidebar-brand__icon img, .sidebar-brand__logo, .login-gate__logo { object-fit: contain; } /* —— 侧栏 agent 卡片头像: 用 logo 替换 emoji —— 2026.8.2 结构: .sidebar-agent-card__avatar > .sidebar-agent-card__avatar-text 放大圆形 + logo 占比, 让 logo 清晰可见 */ .sidebar-agent-card__avatar, .sidebar-agent-card__avatar-text, .viewer-avatar, .viewer-avatar--footer, .viewer-avatar--session { background: url(../favicon.svg) center / 86% no-repeat, var(--secondary, #eef1f5); color: transparent; /* 隐藏 emoji 文字 */ background-size: 86% 86%; } .sidebar-agent-card__avatar-text { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; } .sidebar-agent-card__avatar { flex-shrink: 0; } .sidebar-agent-card__avatar img, .viewer-avatar img { display: none; } /* —— 禁用 agent 切换器: 点击左上角 agent 名称不弹出代理列表 —— */ .sidebar-agent-card__main { pointer-events: none; /* 点击无任何反应 */ cursor: default; } .sidebar-agent-card__chevron { display: none; /* 隐藏"切换 agent"的下拉箭头 */ } /* —— 左下角"收件箱项目"按钮: 图标换成 GroovyClaw logo, 数字去掉红色 —— */ .sidebar-issues-button__icon { background: url(../favicon.svg) center / 92% no-repeat; width: 22px; height: 22px; color: transparent; /* 隐藏默认 inbox 图标 */ background-color: transparent !important; } .sidebar-issues-button__icon svg { display: none !important; /* 隐藏原始 SVG 图标 */ } .sidebar-issues-button__count { background: var(--accent, #4176e6) !important; /* 红色 -> 品牌蓝 */ color: #fff; } /* —— 顶部品牌区收敛(logo 尺寸、用 favicon) —— */ .topbar-brand__logo { max-height: 26px; width: auto; } .topbar-brand__title { font-weight: 700; letter-spacing: 0.01em; } /* —— DSH 风格变量(数据取自 dsh-web-frontend 设计令牌) —— 裸 :root 命中所有主题, 保证品牌色稳定 */ :root, :root[data-theme-mode=light], :root[data-theme-mode=dark], :root[data-theme-mode=system], :root[data-theme=claw], :root[data-theme=knot], :root[data-theme=dash], :root[data-theme=dash-light], :root[data-theme=openknot], :root[data-theme=openknot-light], :root[data-theme=light], :root[data-theme=dark] { /* 表面: 白 + 极浅蓝灰 (neutral-bluish 50/60/75/100) */ --bg: #f9fafb; /* 页面画布: 极浅蓝灰 */ --panel: #f5f6f7; /* 侧边栏/面板: 浅灰 */ --bg-elevated: #ffffff; /* 浮层/弹层: 白 */ --bg-content: #f5f6f7; /* 内容区: 浅灰 */ --bg-hover: #f1f3f5; /* 悬停: 蓝灰 */ --bg-muted: #ebeef2; --card: #ffffff; /* 卡片: 白 */ --card-highlight: #edf3fe; /* 卡片高亮: DeepSeek 蓝 50 */ --card-foreground: #0f1115; --chrome: #f9fafbf5; --chrome-strong: #f9fafbfa; /* 主色: DeepSeek 品牌蓝 (deepseek-500 #4176E6) */ --accent: #4176e6; --accent-hover: #4868b2; /* deepseek-600 */ --accent-foreground: #ffffff; --accent-glow: rgba(65, 118, 230, 0.30); --accent-muted: #4176e6; --accent-subtle: #4176e814; --primary: #4176e6; --primary-foreground: #ffffff; --action: #4176e6; /* 边框: 浅灰蓝 */ --border: #e1e5ee; --border-hover: #d5dae4; --border-strong: #c9cfdc; /* 文字: 近黑 (neutral-bluish-1000) */ --text: #0f1115; --text-strong: #0f1115; --chat-text: #0f1115; } /* —— 红色龙虾(openclaw-mascot)统一替换为高维 logo —— 覆盖所有出现处: 欢迎页空状态吉祥物 / 加载动画 / 任何 openclaw-mascot */ openclaw-mascot { display: none !important; /* 隐藏龙虾组件本体 */ } /* 欢迎页空状态吉祥物容器 */ .agent-chat__welcome-clawd { background: url(../favicon.svg) center / contain no-repeat; min-height: 112px; min-width: 112px; display: flex; align-items: center; justify-content: center; } .agent-chat__welcome-clawd * { visibility: hidden; /* 隐藏容器内的任何残余内容 */ } /* 兜底: 任何可能是龙虾/pet 的容器若有红色背景, 一并隐藏其内 svg */ .agent-chat__welcome-clawd svg, .lobster-pet, lobster-pet, openclaw-lobster-pet { display: none !important; } /* —— 去掉左下角"收件箱项目"按钮 —— */ .sidebar-issues-button, .sidebar-footer-bar .sidebar-issues-button { display: none !important; } /* ============================================================ 消息时间常显 (2026-09-18) 内置行为: 整条 .chat-group-footer 默认 opacity:0, 只在 hover / focus 时显示 —— 所以"什么时候问的"平时完全看不到。 文本由 msg-time.js 改写成绝对时间(MM-DD HH:mm)。 ⚠️ 必须用 !important: 定义这些隐藏规则的 CSS (control-ui-boot-BrFonq7T.css / custodian-surface-*.css) 是**懒加载**的, 注入时间晚于 custom.css, 同级声明会被它反超。 顺带说明: 时间戳在有 meta 的消息里位于 .msg-meta__summary 按钮内; tokens/cost/model 那些明细在 tooltip 的 slot="content" 里, 不在行内 —— 所以放开 summary 只会露出时间, 不会带出杂项。 ============================================================ */ .chat-group { --chat-footer-disclosure-opacity: 1 !important; --chat-footer-disclosure-pointer-events: auto !important; --chat-footer-detail-position: static !important; --chat-persistent-footer-opacity: 1 !important; } /* footer 本体常显(on hover 之外也显示) */ .chat-group-footer, .chat-group-footer--persistent-identity { opacity: 1 !important; pointer-events: auto !important; } /* 时间及其所在的可点击摘要: 常显、回到文档流(原本 absolute 定位) */ .chat-group-footer :is(.chat-group-timestamp, .msg-meta__summary) { opacity: 1 !important; position: static !important; pointer-events: auto !important; } /* 操作按钮(复制/回复/确认)仍保持"悬停/聚焦才出现", 且不占位, 免得刷屏 */ .chat-group:not(:hover):not(:focus-within) .chat-group-footer :is(.chat-confirm-wrap, .chat-group-footer-actions) { position: absolute !important; opacity: 0 !important; pointer-events: none !important; } /* 时间戳本身: 克制的颜色 + 等宽数字, 不抢正文 */ .chat-group-timestamp { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } /* —— 标注渲染: 隐藏内置原文, 用 ::after 显示 msg-time.js 写的属性 —— 为什么这么做: 内置