fix(style): 文档区三处可读性/对齐修复

选区:文档区改用文档主题链接色 30% 混色,深色 UI 的深灰弱强调色不再压浅纸面;
代码块:pre 与 Mermaid 标题条改走 --doc-code-bg(此前只有行内代码被覆盖,
深色 UI 下 GitHub/Notion/经典纸张三主题代码块全是黑块);
侧边栏空状态(尚未打开文件夹+打开文件夹按钮)改为居中。
This commit is contained in:
Muse
2026-11-14 13:06:17 +08:00
parent 9113bea007
commit f378c60363
2 changed files with 9 additions and 2 deletions

View File

@@ -59,7 +59,7 @@ function Sidebar(p: Props) {
refreshSignal={p.refreshSignal ?? 0}
/>
) : (
<div className="sidebar-empty">
<div className="sidebar-empty center">
<p>尚未打开文件夹。</p>
{p.tauriMode
? <button className="sidebar-action" onClick={p.onOpenFolder}>打开文件夹…</button>

View File

@@ -80,6 +80,7 @@ button { font: inherit; color: inherit; }
.outline-item:hover { background: var(--hover); }
.sidebar-empty { padding: 12px 10px; font-size: 13px; color: var(--text-dim); line-height: 1.6; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sidebar-empty p { margin: 0; }
.sidebar-empty.center { align-items: center; text-align: center; }
.sidebar-action, .primary { background: var(--accent); color: #fff; border: 0; border-radius: 7px; padding: 6px 14px; cursor: pointer; }
.filetree-head { display: flex; align-items: center; gap: 6px; padding: 2px 4px 6px; }
.filetree-root { font-weight: 600; font-size: 13px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -145,7 +146,7 @@ kbd { background: var(--code-bg); border: 1px solid var(--border); border-radius
.table-toolbar button:hover { background: var(--accent-weak); }
.table-toolbar .tt-sep { width: 1px; height: 16px; background: var(--border); margin: 0 3px; }
.mermaid-block { border: 1px solid var(--border); border-radius: 8px; margin: 10px 0; overflow: hidden; }
.mermaid-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px; background: var(--code-bg); font-size: 12px; color: var(--text-dim); }
.mermaid-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px; background: var(--doc-code-bg); font-size: 12px; color: var(--doc-quote-color, var(--doc-ink)); }
.mermaid-head button { border: 0; background: transparent; cursor: pointer; color: var(--accent); font-size: 12px; padding: 2px 6px; }
.mermaid-preview { padding: 14px; text-align: center; overflow-x: auto; }
.mermaid-preview svg { max-width: 100%; height: auto; }
@@ -244,6 +245,9 @@ kbd { background: var(--code-bg); border: 1px solid var(--border); border-radius
}
.milkdown .ProseMirror a { color: var(--doc-link); }
.milkdown .ProseMirror code { background: var(--doc-code-bg); }
/* 代码块背景同样走文档主题变量:此前只有行内代码被覆盖、pre 仍用 UI 的 --code-bg,
深色 UI 下是 #2c2c2c,压在浅色文档主题(GitHub/Notion/经典纸张)的深色字上全是黑块。 */
.milkdown .ProseMirror pre { background: var(--doc-code-bg); }
.milkdown .ProseMirror blockquote { border-left-color: var(--doc-quote-border); color: var(--doc-quote-color); }
:root[data-doc-theme='github'] .milkdown .ProseMirror h1 { font-size: 1.9em; }
:root[data-doc-theme='github'] .milkdown .ProseMirror h2 { border-bottom: 1px solid var(--doc-h-border); padding-bottom: 6px; }
@@ -324,6 +328,9 @@ kbd { background: var(--code-bg); border: 1px solid var(--border); border-radius
/* ——— 审计修复:全应用滚动条与选区(此前全是 WebView 默认样式,深色下割裂) ——— */
::selection { background: var(--accent-weak); }
/* 文档区选区不能用 UI 的 --accent-weak:深色 UI 下它是深灰 (#333c48),压在浅色纸面上
与深色字叠成黑块、选中文看不清。改用当前文档主题的链接色做 30% 混色,随纸面自适应。 */
.editor ::selection { background: color-mix(in srgb, var(--doc-link) 30%, transparent); }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }