pi-web-ui 0.95.0 → 0.96.1

package/themes/zhupi-dark.css

@@ -0,0 +1,718 @@
+/* theme-name: 朱批·夜 */
+/* theme-name-en: Vermilion Night */
+/* theme-group: builtin */
+:root {
+	color-scheme: dark;
+	--bg: #131313;
+	--bg-elev: #1e1e1e;
+	--bg-elev2: #262626;
+	--bg-elev3: rgba(255, 255, 255, 0.06);
+	--border: #333333;
+	--border-soft: #2b2b2b;
+	--text: #eaeaea;
+	--text-dim: #a0a0a0;
+	--text-faint: #6e6e6e;
+	--accent: #e05a35;
+	--accent-soft: rgba(224, 90, 53, 0.14);
+	--green: #64a874;
+	--green-soft: rgba(100, 168, 116, 0.14);
+	--red: #e0654e;
+	--red-soft: rgba(224, 101, 78, 0.14);
+	--amber: #d4a24a;
+	--blue: #7a9cc9;
+	--blue-soft: rgba(122, 156, 201, 0.14);
+	--term-bg: #0f0f0f;
+	--term-fg: #eaeaea;
+	--term-cursor: #e05a35;
+	--term-cursor-accent: #0f0f0f;
+	--term-selection: rgba(224, 90, 53, 0.35);
+	--term-black: #262626;
+	--term-red: #e0654e;
+	--term-green: #7ab88a;
+	--term-yellow: #d4a24a;
+	--term-blue: #85a8d8;
+	--term-magenta: #bd8fb8;
+	--term-cyan: #6fb5ad;
+	--term-white: #eaeaea;
+	--term-bright-black: #6e6e6e;
+	--term-bright-red: #ef7a60;
+	--term-bright-green: #8fc99e;
+	--term-bright-yellow: #e3b45c;
+	--term-bright-blue: #9db8e2;
+	--term-bright-magenta: #cf9fc9;
+	--term-bright-cyan: #85c4bc;
+	--term-bright-white: #ffffff;
+	--mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
+	--serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, Georgia, "Times New Roman", serif;
+	--mermaid-font-size: 12px;
+	--sans:
+		-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto,
+		Helvetica, Arial, sans-serif;
+	--tooltip-bg: #2a2a2a;
+	--code-bg: #0f0f0f;
+	--code-text: #d6d6d6;
+	--code-border: transparent;
+	--code-pad: 0;
+	--card-body-pad: 4px 14px 12px;
+	--err-text: #ef8270;
+	--red-text: #ef8270;
+	--amber-text: #e3b45c;
+	--info-blue: #85a8d8;
+	--link: #e58a67;
+	--link-hover: #ef9c7e;
+	--link-soft: #5a3020;
+	--md-strong: #f2f2f2;
+	--skill-blue: #85a8d8;
+	--plugin-purple: #b394cc;
+	--auth-green: #8fc99e;
+	--scroll-thumb: rgba(255, 255, 255, 0.14);
+	--scroll-thumb-hover: rgba(224, 90, 53, 0.45);
+	--notice-err-bg: #33231f;
+	--notice-warn-bg: #322a1c;
+	--notice-info-bg: #20262e;
+	--notice-err-border: #e0654e;
+	--notice-warn-border: #d4a24a;
+	--notice-info-border: #7a9cc2;
+	--send-blue: #e05a35;
+	--send-blue-hover: #ef6f48;
+	--stop-red: #c2402a;
+	--stop-red-hover: #e05a35;
+	--brand-grad-a: #e05a35;
+	--brand-grad-b: #d4a24a;
+	--on-amber: #131313;
+	--search-active-fg: #131313;
+	--switch-knob: #eaeaea;
+	--sunken-bg: rgba(0, 0, 0, 0.25);
+	--glow-015: rgba(255, 255, 255, 0.015);
+	--glow-025: rgba(255, 255, 255, 0.025);
+	--glow-03: rgba(255, 255, 255, 0.03);
+	--glow-04: rgba(255, 255, 255, 0.04);
+	--glow-05: rgba(255, 255, 255, 0.05);
+	--glow-12: rgba(255, 255, 255, 0.12);
+	--glow-18: rgba(255, 255, 255, 0.18);
+	--glow-22: rgba(255, 255, 255, 0.22);
+	--glow-38: rgba(255, 255, 255, 0.38);
+	--control-fg: #a0a0a0;
+	--control-bg: #262626;
+	--control-border: #333333;
+	--bg-image: none;
+	--bg-image-dim: 0.85;
+	--bg-image-blur: 0px;
+	--wallpaper-panel-alpha: 100%;
+	--topbar-bg: #131313;
+	--statusbar-bg: #131313;
+	--panel-bg: #222222;
+	--card-bg: #262626;
+	--chip-bg: #1e1e1e;
+	--msgs-bg: #131313;
+	--inputbox-bg: #1e1e1e;
+	--menu-bg: #2a2a2a;
+}
+
+/* =========================================================================
+   朱批·夜 · Vermilion Night
+   「朱批」的暖墨夜用版：同一套稿纸排版语言（无气泡 / 台账行 / ※脚注 /
+   命令栏），色板换成深暖墨底 + 纸色文字，朱红提亮保对比。
+   ========================================================================= */
+
+/* ---- 0. 夜纸底色：墨面的天头微光与角落沉暗 ---- */
+body,
+.app-root {
+	background-color: var(--bg);
+	background-image:
+		radial-gradient(ellipse 90% 55% at 50% -8%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 70%),
+		radial-gradient(ellipse 100% 70% at 108% 112%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 70%);
+	background-attachment: fixed;
+}
+
+::selection {
+	background: rgba(224, 90, 53, 0.32);
+}
+
+/* ---- 1. 顶栏隐形化：无底色层次，只一条 hairline，印章品牌 ---- */
+.topbar {
+	background: var(--topbar-bg) !important;
+	border-bottom: 1px solid var(--border-soft) !important;
+	box-shadow: none !important;
+}
+
+.brand-logo {
+	background: var(--accent) !important;
+	color: #131313 !important;
+	border-radius: 2px !important;
+	box-shadow: none !important;
+}
+
+.brand-name {
+	font-family: var(--serif);
+	font-weight: 700;
+	letter-spacing: 0.06em;
+}
+
+/* 顶栏控件全部素色化：无底无框，hover 才现 hairline。兜底所有 button /
+ * [role=button]——不管类名是谁（基线 chip / 插件注入 / capsule 等），顶栏里
+ * 一律裸图标，dropdown 触发器不许再带盒子。 */
+.topbar button,
+.topbar [role="button"],
+.topbar a.chip,
+.topbar .chip {
+	background: transparent !important;
+	border: 1px solid transparent !important;
+	border-radius: 3px !important;
+	box-shadow: none !important;
+	transition:
+		border-color 0.15s ease,
+		color 0.15s ease !important;
+}
+
+.topbar button:hover,
+.topbar [role="button"]:hover,
+.topbar a.chip:hover,
+.topbar .chip:hover {
+	border-color: var(--border) !important;
+	background: transparent !important;
+}
+
+.topbar .dropdown {
+	background: transparent !important;
+	border: none !important;
+	box-shadow: none !important;
+}
+
+/* ---- 2. 消息区：左缘墨线活动脊 + 文档化排版 ----
+ * 列缘这条线让给脊线与输入框边框：脊线（虚线针脚）与输入框左边框同一条
+ * 像素线，历史虚下来、接到输入框变实；消息正文整体右移 23px 挂在轨上。
+ * 仅桌面（≥641px）启用；手机保持原生内缩。 */
+@media (min-width: 641px) {
+	.messages {
+		padding-inline: max(0px, calc(var(--chat-inset) + 23px - var(--msgs-gutter, 0px))) !important;
+		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.14) 40%, transparent 0);
+		background-repeat: repeat-y;
+		background-size: 1px 7px;
+		background-position: calc(var(--chat-inset) - 0.5px) top;
+	}
+}
+
+.msg {
+	position: relative;
+	padding: 2px 0 10px;
+}
+
+/* 操作按钮：行内簇已提升为基线默认（.chead-actions，随消息悬停显隐、
+   与行内复制按钮并排），主题里不再需要任何覆盖。 */
+
+/* 兜底路径（用户消息 / 纯文本回复，无 head 可宿主）：底部操作行改为悬停
+   浮牌，钉在消息右上角的空纸面上 */
+.msg-actions {
+	position: absolute;
+	top: 0;
+	right: 0;
+	margin: 0;
+	z-index: 2;
+	padding: 2px;
+	background: var(--menu-bg) !important;
+	border: 1px solid var(--border) !important;
+	border-radius: 4px !important;
+	box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.5) !important;
+	opacity: 0;
+	pointer-events: none;
+	transition:
+		opacity 0.12s ease,
+		pointer-events 0.12s ease;
+}
+
+.msg:hover .msg-actions,
+.msg-actions.has-open-dropdown,
+.msg-actions:focus-within {
+	opacity: 1;
+	pointer-events: auto;
+}
+
+/* 角色行：书目式小标 */
+.msg-meta {
+	margin-bottom: 4px;
+}
+
+/* head 行左右内边距归零：折叠三角贴齐列左缘（文字同一条线），右侧复制
+ * 按钮贴右缘——head 无边框后，钮与缘之间不能悬空。三角形 28px 盒内 16px
+ * 图标居中内缩 6px，用负外边距做光学对齐。 */
+.chead {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.chead-toggle {
+	margin-left: -6px;
+}
+
+/* 正文块上的单一复制键同样去重：消息复制已在 head 行的操作簇里 */
+.msg-text-copy {
+	display: none !important;
+}
+
+/* head 悬浮不再出现底色块：纸面保持完全平整（键盘 focus 的 outline 保留，
+ * 只服务键盘导航） */
+div.chead[role="button"]:hover,
+.chead-toggle:hover {
+	background: transparent !important;
+}
+
+.msg-role {
+	font-size: 10.5px;
+	font-weight: 600;
+	letter-spacing: 0.18em;
+	color: var(--text-faint);
+}
+
+.msg-time {
+	font-family: var(--mono);
+	font-size: 10.5px;
+}
+
+/* ---- 3. 用户输入：去气泡，「起手式，夜纸批注体 ---- */
+.msg-user .msg-body {
+	position: relative;
+	background: transparent !important;
+	border: none !important;
+	border-radius: 0 !important;
+	padding: 0 0 0 1.5em !important;
+	font-family: var(--serif);
+	font-size: 15.5px;
+	font-weight: 600;
+	line-height: 1.8;
+	color: var(--text);
+}
+
+.msg-user .msg-body::before {
+	content: "「";
+	position: absolute;
+	left: 0;
+	top: -0.12em;
+	font-family: var(--serif);
+	font-size: 1.3em;
+	font-weight: 700;
+	color: var(--accent);
+	line-height: 1;
+}
+
+/* ---- 4. 助手正文：衬线文档体 ---- */
+.msg-assistant .msg-text {
+	font-family: var(--serif);
+	font-size: 15px;
+	line-height: 1.85;
+	color: var(--text);
+}
+
+.msg-assistant .msg-text p:first-child {
+	margin-top: 0;
+}
+
+.msg-assistant .msg-text h1,
+.msg-assistant .msg-text h2,
+.msg-assistant .msg-text h3,
+.msg-assistant .msg-text h4 {
+	font-family: var(--serif);
+	font-weight: 700;
+	color: var(--md-strong);
+	letter-spacing: 0.02em;
+}
+
+.msg-assistant .msg-text blockquote {
+	border-left: 2px solid var(--accent-soft);
+	font-style: normal;
+	color: var(--text-dim);
+}
+
+.msg-assistant .msg-text a {
+	color: var(--link);
+	text-decoration: underline dotted;
+	text-decoration-color: rgba(224, 90, 53, 0.5);
+	text-underline-offset: 3px;
+}
+
+.msg-assistant .msg-text hr {
+	border: none;
+	border-top: 1px dotted var(--border);
+}
+
+.msg-assistant .msg-text code {
+	background: #2a2a2a;
+	color: #e5957a;
+	border-radius: 2px;
+	padding: 1px 5px;
+}
+
+/* ---- 5. 工具调用 = 台账行：无框无底，点线引导符填空 ---- */
+.toolcall {
+	margin: 1px 0 !important;
+	border: none !important;
+	border-radius: 0 !important;
+	background: transparent !important;
+	box-shadow: none !important;
+	overflow: visible !important;
+}
+
+.toolcall-head {
+	display: flex;
+	align-items: center;
+	min-height: 24px;
+	padding: 2px 0;
+	font-family: var(--mono);
+	font-size: 12px;
+}
+
+.toolcall-name {
+	font-family: var(--mono) !important;
+	font-weight: 500 !important;
+	font-size: 12px !important;
+	letter-spacing: 0.02em;
+	color: var(--text-dim) !important;
+}
+
+/* 点线引导符：账本目录式填空 */
+.toolcall .toolcall-spacer {
+	border-bottom: 1px dotted #3f3f3f;
+	height: 0.7em;
+	margin: 0 10px;
+}
+
+.toolcall-status {
+	color: var(--text-faint) !important;
+}
+
+.toolcall.run .toolcall-name {
+	color: var(--accent) !important;
+}
+
+.toolcall.run .toolcall-status {
+	color: var(--accent) !important;
+}
+
+.toolcall.ok .toolcall-status {
+	color: var(--green) !important;
+}
+
+.toolcall.err .toolcall-status {
+	color: var(--red) !important;
+}
+
+.toolcall.err .toolcall-name {
+	color: var(--red) !important;
+}
+
+/* 展开的参数/输出：并入台账，无框零内边距平面文本（--code-border/--code-pad
+   已按全透明主题机制置 transparent/0，连带 .termline 一并生效） */
+.toolcall-args pre,
+.toolcall-output pre {
+	background: transparent !important;
+	border: none !important;
+	border-radius: 0 !important;
+	padding: 0 !important;
+}
+
+/* 工具卡体：去掉分隔线与内边距，参数/输出与卡头同距平铺 */
+.toolcall-body {
+	border-top: none !important;
+	padding: 0 0 6px !important;
+}
+
+/* 卡内重复的终端图标只剩噪音（卡头已有工具图标），参照全透明主题隐藏 */
+.termline-icon {
+	display: none;
+}
+
+.toolcall-output-label {
+	margin-top: 6px;
+}
+
+.toolcall-kill {
+	border-radius: 3px;
+}
+
+/* ---- 6. 思考流 = 脚注：※ 起手，淡墨小字 ---- */
+.thinking {
+	margin: 4px 0 !important;
+	border: none !important;
+	border-radius: 0 !important;
+	background: transparent !important;
+	box-shadow: none !important;
+}
+
+.thinking-head {
+	font-size: 12px;
+	color: var(--text-faint);
+}
+
+.thinking-icon {
+	color: var(--text-faint) !important;
+}
+
+.thinking-body {
+	border-top: none !important;
+	font-style: normal !important;
+	font-size: 12.5px !important;
+	color: var(--text-dim) !important;
+	background: transparent;
+	position: relative;
+	padding: 2px 14px 2px 1.6em !important;
+}
+
+.thinking-body::before {
+	content: "※";
+	position: absolute;
+	left: 0;
+	top: 2px;
+	color: var(--text-faint);
+}
+
+.thinking-live .thinking-toggle,
+.thinking-live-label {
+	color: var(--accent) !important;
+}
+
+/* ---- 7. 折叠摘要行 / 报错：并入台账体系 ---- */
+.msg-collapsed {
+	background: transparent !important;
+	border: none !important;
+	border-bottom: 1px dotted var(--border-soft) !important;
+	border-radius: 0 !important;
+	box-shadow: none !important;
+	padding-left: 0 !important;
+	padding-right: 0 !important;
+}
+
+.msg-collapsed-action::before {
+	margin-left: 0 !important;
+}
+
+.msg-error {
+	background: var(--red-soft) !important;
+	border: none !important;
+	border-left: 3px solid var(--red) !important;
+	border-radius: 0 !important;
+	font-family: var(--serif);
+}
+
+/* ---- 8. 输入区 = 命令栏：与其他主题同构——只动颜色不动几何，
+        朱笔以 inset 阴影画在边框内侧，外缘与脊线恒对齐 ---- */
+.inputbar {
+	background: transparent !important;
+}
+
+.inputbox {
+	background: var(--inputbox-bg) !important;
+	border: none !important;
+	border-radius: 3px !important;
+	box-shadow: inset 3px 0 0 0 rgba(224, 90, 53, 0.4) !important;
+	transition:
+		border-color 0.2s ease,
+		box-shadow 0.2s ease !important;
+}
+
+.inputbox:focus-within {
+	border: none !important;
+	box-shadow: inset 3px 0 0 0 var(--accent) !important;
+}
+
+.btn.send {
+	background: var(--send-blue) !important;
+	color: #131313 !important;
+	border-radius: 50% !important;
+	box-shadow: none !important;
+	font-weight: 600;
+}
+
+.btn.send:hover {
+	background: var(--send-blue-hover) !important;
+}
+
+.btn.stop {
+	background: var(--stop-red) !important;
+	color: #131313 !important;
+	border-radius: 50% !important;
+}
+
+/* 输入框底部模型选择、思考强度、预设等按钮：去边框、透明底，hover 现 hairline */
+.composer-tools {
+	border-top: none !important;
+}
+
+.composer-tools .chip,
+.composer-tools .capsule-segment {
+	font-size: 13px !important;
+	padding: 4px 10px !important;
+	gap: 6px !important;
+	background: transparent !important;
+	border: 1px solid transparent !important;
+	box-shadow: none !important;
+	border-radius: 3px !important;
+	transition:
+		border-color 0.15s ease,
+		background 0.15s ease !important;
+}
+
+.composer-tools .model-thinking-capsule {
+	background: transparent !important;
+	border: none !important;
+	box-shadow: none !important;
+	padding: 0 !important;
+}
+
+.composer-tools .model-thinking-capsule .capsule-divider {
+	display: none !important;
+}
+
+.composer-tools .chip:hover,
+.composer-tools .capsule-segment:hover {
+	border-color: var(--border) !important;
+	background: transparent !important;
+}
+
+.composer-tools-left {
+	gap: 6px !important;
+}
+
+.composer-tools .chip-model,
+.composer-tools .chip-sub,
+.composer-tools .capsule-model-name,
+.composer-tools .capsule-thinking-text {
+	font-size: 12.5px !important;
+}
+
+/* ---- 9. 底栏 / 状态栏：hairline 收边 ---- */
+.statusbar {
+	background: var(--statusbar-bg) !important;
+	border-top: 1px solid var(--border-soft) !important;
+	box-shadow: none !important;
+}
+
+.goalbar {
+	background: transparent !important;
+	border-top: 1px solid var(--border-soft) !important;
+	box-shadow: none !important;
+}
+
+/* ---- 10. 左右面板：素纸文件栏 ----
+ * 激活态不做红洗（accent-soft 洗在墨底上是一块脏褐），改为中性纸面 7% +
+ * 左缘 2px 朱标；圆角统一 8px。 */
+.panel {
+	background: var(--panel-bg) !important;
+	border-color: var(--border-soft) !important;
+}
+
+.session-item,
+.project-item,
+.file-item,
+.scm-file {
+	border-radius: 8px;
+}
+
+.session-item.active,
+.project-item.active {
+	background: rgba(255, 255, 255, 0.07);
+	border: none;
+	box-shadow: inset 2px 0 0 var(--accent);
+}
+
+.session-item.active {
+	padding: 8px 10px;
+}
+
+.project-item.active {
+	padding: 7px 10px;
+}
+
+/* ---- 11. 代码块：墨面凹版 ---- */
+.codeblock {
+	background: var(--code-bg) !important;
+	border: 1px solid var(--border-soft) !important;
+	border-radius: 3px !important;
+	box-shadow: none !important;
+}
+
+.codeblock pre,
+.msg-text pre {
+	background: var(--code-bg) !important;
+	color: var(--code-text) !important;
+}
+
+/* ---- 11b. 语法高亮去蓝底，转暖墨 ---- */
+.hljs {
+	color: #d8d0bd;
+	background: transparent !important;
+}
+
+.hljs-deletion {
+	color: #f0a896;
+	background: rgba(224, 106, 80, 0.16);
+}
+
+.hljs-addition {
+	color: #a8d4a8;
+	background: rgba(111, 174, 127, 0.16);
+}
+
+/* ---- 12. 弹层与菜单：实底 + hairline，方角家族 ---- */
+.modal,
+.tool-info-modal,
+.settings-modal,
+.model-modal,
+.tpl-modal,
+.dd-menu,
+.dialog-inline {
+	border-radius: 4px !important;
+	border: 1px solid var(--border) !important;
+	box-shadow:
+		0 1px 2px rgba(0, 0, 0, 0.3),
+		0 16px 40px -12px rgba(0, 0, 0, 0.55) !important;
+}
+
+.dd-menu {
+	background: var(--menu-bg) !important;
+	border: 1px solid var(--border) !important;
+	border-radius: 4px !important;
+	box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6) !important;
+}
+
+.dd-item:hover,
+.dd-all-item:hover {
+	background: var(--accent-soft) !important;
+}
+
+/* ---- 13. chips / 徽标：账目标签体 ---- */
+.chip {
+	background: var(--chip-bg) !important;
+	border: 1px solid var(--border-soft) !important;
+	border-radius: 2px !important;
+	box-shadow: none !important;
+	font-family: var(--mono);
+	font-size: 11px;
+}
+
+/* ---- 14. 滚动条：细墨线 ---- */
+::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+
+::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+	background: var(--scroll-thumb);
+	border-radius: 0;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: var(--scroll-thumb-hover);
+}
+
+/* ---- 15. 通知条：hairline 左线式 ---- */
+.notice-err,
+.notice-warn,
+.notice-info {
+	border-radius: 0 !important;
+	border-width: 1px !important;
+	border-left-width: 3px !important;
+}