fix(style): 文档区三处可读性/对齐修复
选区:文档区改用文档主题链接色 30% 混色,深色 UI 的深灰弱强调色不再压浅纸面; 代码块:pre 与 Mermaid 标题条改走 --doc-code-bg(此前只有行内代码被覆盖, 深色 UI 下 GitHub/Notion/经典纸张三主题代码块全是黑块); 侧边栏空状态(尚未打开文件夹+打开文件夹按钮)改为居中。
This commit is contained in:
@@ -59,7 +59,7 @@ function Sidebar(p: Props) {
|
|||||||
refreshSignal={p.refreshSignal ?? 0}
|
refreshSignal={p.refreshSignal ?? 0}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className="sidebar-empty">
|
<div className="sidebar-empty center">
|
||||||
<p>尚未打开文件夹。</p>
|
<p>尚未打开文件夹。</p>
|
||||||
{p.tauriMode
|
{p.tauriMode
|
||||||
? <button className="sidebar-action" onClick={p.onOpenFolder}>打开文件夹…</button>
|
? <button className="sidebar-action" onClick={p.onOpenFolder}>打开文件夹…</button>
|
||||||
|
|||||||
@@ -80,6 +80,7 @@ button { font: inherit; color: inherit; }
|
|||||||
.outline-item:hover { background: var(--hover); }
|
.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 { 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 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; }
|
.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-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; }
|
.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 button:hover { background: var(--accent-weak); }
|
||||||
.table-toolbar .tt-sep { width: 1px; height: 16px; background: var(--border); margin: 0 3px; }
|
.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-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-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 { padding: 14px; text-align: center; overflow-x: auto; }
|
||||||
.mermaid-preview svg { max-width: 100%; height: 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 a { color: var(--doc-link); }
|
||||||
.milkdown .ProseMirror code { background: var(--doc-code-bg); }
|
.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); }
|
.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 h1 { font-size: 1.9em; }
|
||||||
:root[data-doc-theme='github'] .milkdown .ProseMirror h2 { border-bottom: 1px solid var(--doc-h-border); padding-bottom: 6px; }
|
: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 默认样式,深色下割裂) ——— */
|
/* ——— 审计修复:全应用滚动条与选区(此前全是 WebView 默认样式,深色下割裂) ——— */
|
||||||
::selection { background: var(--accent-weak); }
|
::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; }
|
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
|
||||||
*::-webkit-scrollbar { width: 10px; height: 10px; }
|
*::-webkit-scrollbar { width: 10px; height: 10px; }
|
||||||
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
|
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
|
||||||
|
|||||||
Reference in New Issue
Block a user