@chengzhao-dev/dsh-quarto-book 0.4.3 → 0.6.0

package/skills/designing-theme/assets/theme/css/callouts.css

@@ -1,31 +1,34 @@
-/* dsh-quarto-book Quarto 主题 · 提示卡片 callout（左色条 + 浅底 + 小圆角）
+/* dsh-quarto-book Quarto 主题 · 编辑注 callout（2px 色条 + 无底色 + 无圆角）
  *
+ * 书籍阅读方向：callout 不是「卡片」，而是正文外侧的编辑注。
+ * 类型只在左色条和图标上出现，标题回到正文色，避免 GitHub admonition 的彩色小卡观感。
  * 下面的 border: none 简写会把 border-left-color 重置为 currentColor，
  * Bootstrap 的 div.callout-<type>.callout 又是 (0,2,1)，因此类型规则必须写成
- * div.callout.callout-<type> 才能特异性相同、靠加载顺序胜出，让左条按类型着色。 */
+ * div.callout.callout-<type> 才能特异性相同、靠加载顺序胜出。 */
 
 div.callout.callout-style-default,
 div.callout.callout-style-simple {
   border: none;
-  border-left-width: 3px;
+  border-left-width: 2px;
   border-left-style: solid;
-  border-radius: var(--radius-sm);
+  border-radius: 0;
   margin: 0;
-  padding: 1rem;
+  padding: 0.1rem 0 0.1rem 1.1rem;
   overflow-wrap: break-word;
   display: block;
+  background-color: transparent;
 }
 
 div.callout.callout-style-default > .callout-header,
 div.callout.callout-style-simple > .callout-header {
-  margin: 0 0 0.5rem;
+  margin: 0 0 0.35rem;
   padding: 0;
   background-color: transparent;
   border-radius: 0;
   opacity: 1;
   display: flex;
-  align-items: center;
-  gap: 0.375rem;
+  align-items: baseline;
+  gap: 0.4rem;
 }
 
 div.callout.callout-style-default:not(.no-icon) div.callout-icon-container,
@@ -33,21 +36,28 @@ div.callout.callout-style-simple:not(.no-icon) div.callout-icon-container {
   padding: 0;
   display: inline-flex;
   align-items: center;
+  align-self: center;
 }
 
 .callout .callout-title-container {
-  /* 单字面字体 + font-synthesis: none 下 600 不会变粗；标注标题靠色条与字号区分 */
-  font-size: 0.9375rem;
-  letter-spacing: normal;
+  /* 标题一面用黑体栈：13px 下才有真正的 600（正文楷体在 font-synthesis: none
+     下请求 600 仍是常规笔画）；色条仍标类型，字重与字面差把标签从正文里拎出来。 */
+  font-family: var(--heading-font);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  /* 中文汉字等宽，加字距只把词拉散：标签层级靠字重与字号。 */
   text-transform: none;
+  color: var(--body-color);
 }
 
 div.callout .callout-body,
 div.callout.callout-style-default .callout-body {
   padding: 0;
   font-size: 1rem;
-  line-height: 1.75;
+  line-height: 1.85;
   font-weight: 400;
+  color: var(--body-color);
 }
 
 div.callout.callout-style-default .callout-body > :first-child,
@@ -58,41 +68,40 @@ div.callout.callout-style-default .callout-body > :first-child,
 
 #quarto-document-content > .callout,
 #quarto-document-content section > .callout {
-  margin-top: 1.25rem;
+  margin-top: 1.4rem;
 }
 #quarto-document-content > .callout + .callout,
 #quarto-document-content section > .callout + .callout {
-  margin-top: 2.5rem;
+  margin-top: 1.6rem;
 }
 
+/* 图标按类型着色；标题保持正文色，避免整块变成彩色便签。 */
 .callout.callout-note .callout-title-container,
-.callout.callout-note .callout-icon { color: var(--callout-note-border); }
 .callout.callout-tip .callout-title-container,
-.callout.callout-tip .callout-icon { color: var(--callout-tip-border); }
 .callout.callout-warning .callout-title-container,
-.callout.callout-warning .callout-icon { color: var(--callout-warning-border); }
 .callout.callout-important .callout-title-container,
+.callout.callout-caution .callout-title-container {
+  color: var(--body-color);
+}
+
+.callout.callout-note .callout-icon { color: var(--callout-note-border); }
+.callout.callout-tip .callout-icon { color: var(--callout-tip-border); }
+.callout.callout-warning .callout-icon { color: var(--callout-warning-border); }
 .callout.callout-important .callout-icon { color: var(--callout-important-border); }
-.callout.callout-caution .callout-title-container,
 .callout.callout-caution .callout-icon { color: var(--callout-caution-border); }
 
 div.callout.callout-note {
   border-left-color: var(--callout-note-border);
-  background-color: var(--callout-note-bg);
 }
 div.callout.callout-tip {
   border-left-color: var(--callout-tip-border);
-  background-color: var(--callout-tip-bg);
 }
 div.callout.callout-warning {
   border-left-color: var(--callout-warning-border);
-  background-color: var(--callout-warning-bg);
 }
 div.callout.callout-important {
   border-left-color: var(--callout-important-border);
-  background-color: var(--callout-important-bg);
 }
 div.callout.callout-caution {
   border-left-color: var(--callout-caution-border);
-  background-color: var(--callout-caution-bg);
 }

package/skills/designing-theme/assets/theme/css/code.css

@@ -50,11 +50,11 @@ pre:not(.sourceCode) code {
 }
 pre.sourceCode code > span { line-height: var(--code-line-height); }
 
-/* GitHub 风格高亮只区分颜色，不用额外字重强调命令名或输出 token。 */
+/* 高亮只区分颜色，不用额外字重强调命令名或输出 token。 */
 pre.sourceCode code span { font-weight: 400; }
 
 /*
- * 颜色只由 GitHub 风格的语义 token 提供。不要按字符、位置或命令名
+ * 颜色只由语义 token 提供。不要按字符、位置或命令名
  * 覆盖 span，否则同一行的括号、版本号和普通文本会出现突兀的颜色切换。
  */
 /* 语言代码块和普通文本代码块共享布局；只有语言代码块保留语义 token。 */
@@ -206,6 +206,88 @@ pre.sourceCode code > span:hover { background-color: var(--line-hover-bg); }
 }
 .code-copy-button-checked { opacity: 1; color: var(--link-color); }
 
+/* ---------- 代码工具（code-tools） ----------
+   浮在代码块右上角的「代码」按钮与下拉菜单来自 Bootstrap，默认 16px 灰蓝字、
+   无本轮语义；接到令牌：次要色 → 悬停主色，菜单与分隔线用卡片层令牌。 */
+.code-tools-button {
+  color: var(--text-secondary) !important;
+  font-family: var(--ui-font);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  padding: 0.15rem 0.45rem;
+  border-radius: var(--radius-sm);
+  background: transparent;
+}
+.code-tools-button:hover,
+.code-tools-button:focus-visible {
+  color: var(--body-color) !important;
+  background: var(--surface-raised);
+}
+.code-tools-menu {
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius-md);
+  background: var(--surface-raised);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+  font-family: var(--ui-font);
+  font-size: 0.875rem;
+  padding: 0.25rem;
+}
+.code-tools-menu .dropdown-item {
+  color: var(--body-color);
+  border-radius: var(--radius-sm);
+  padding: 0.3rem 0.55rem;
+}
+.code-tools-menu .dropdown-item:hover {
+  background: var(--surface-raised);
+  color: var(--body-color);
+}
+.code-tools-menu .dropdown-divider {
+  border-top-color: var(--card-border);
+}
+
+/* ---------- 代码标注（code-annotation） ----------
+   Quarto 自带的标注样式是 Bootstrap 默认：gutter 一块浅灰底、行号是主色圆点，
+   暗色下浅灰块会发亮、圆点色与本书强调色不同源。这里只接令牌：gutter 透明、
+   行内编号与注释列表编号共用动作色描边，注释正文走 14px 次要色。 */
+.code-annotation-gutter,
+.code-annotation-gutter-bg {
+  background-color: transparent;
+}
+#quarto-document-content code.sourceCode .code-annotation-anchor,
+#quarto-document-content .code-annotation-container-grid dt {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.15rem;
+  height: 1.15rem;
+  border: 1px solid var(--accent);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--accent);
+  font-family: var(--ui-font);
+  font-size: 0.6875rem;
+  font-weight: 400;
+  line-height: 1;
+  text-decoration: none;
+}
+#quarto-document-content code.sourceCode .code-annotation-anchor {
+  margin-right: 0.4rem;
+}
+.code-annotation-container-grid {
+  margin: 0.6rem 0 1.5rem;
+}
+.code-annotation-container-grid dt {
+  border-color: var(--text-secondary);
+  color: var(--text-secondary);
+  font-family: var(--ui-font);
+}
+.code-annotation-container-grid dd {
+  margin: 0 0 0.45rem;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  line-height: 1.65;
+}
+
 /* 打印时横向滚动不存在，屏幕上的 white-space: pre 会把 100 列截掉；
    打印恢复折行，屏幕规则不动。 */
 @media print {

package/skills/designing-theme/assets/theme/css/content.css

@@ -1,6 +1,6 @@
 /* dsh-quarto-book Quarto 主题 · 正文内容（表格 / 引用 / 正文组件与排版；自 common.css 拆分） */
 
-/* ---------- 表格（冷灰 docs：无外框、表头底线 + 行 hairline） ---------- */
+/* ---------- 表格（booktabs：顶/底粗线、表头细线，无行线与竖线） ---------- */
 .table {
   --bs-table-hover-bg: transparent;
   /* 表体与正文同档：表格字号一旦小于正文，正文里嵌表格就会出现两次字级跳变，
@@ -17,11 +17,11 @@
   font-variant-numeric: tabular-nums;
 }
 .table > :not(caption) > * > * {
-  padding: 0.5rem 1rem;
+  padding: 0.55rem 0.9rem;
   vertical-align: baseline;
-  border-bottom: 1px solid var(--table-hairline);
+  border-bottom: 0;
 }
-/* 首尾列贴边（docs 表格无左右内边距） */
+/* 首尾列贴边，让表格与正文左缘对齐 */
 .table > :not(caption) > * > :first-child {
   padding-inline-start: 0;
 }
@@ -31,9 +31,15 @@
 .table thead th {
   background-color: transparent;
   font-weight: 600;
-  font-size: 0.8125rem;
+  /* 表头比表体小 1px（17px → 15px），层级靠字重与字号，不靠比顶线更粗的线。 */
+  font-size: 0.9375rem;
   text-align: left;
   padding-top: 0;
+  padding-bottom: 0.45rem;
+  border-top: 1px solid var(--table-border);
+  border-bottom: 1px solid var(--table-border);
+}
+.table > tbody > tr:last-child > * {
   border-bottom: 1px solid var(--table-border);
 }
 
@@ -59,55 +65,151 @@
   padding-inline-end: 0;
 }
 
-/* ---------- 引用块（> 标记，用于「注意」等提示；GitHub markdown-body 灰风：灰边 + 灰字，无彩色底） ---------- */
+/* 表题：Pandoc 输出 <caption>，Bootstrap 默认把它放表下（caption-side: bottom），
+   这里统一提到表上、左对齐，与图注一样小一号。 */
+#quarto-document-content .table > caption {
+  caption-side: top;
+  text-align: left;
+  font-size: 0.875rem;
+  line-height: 1.65;
+  color: var(--text-secondary);
+  padding: 0 0 0.5rem;
+}
+
+/* 斑马纹压平：书籍表格靠表头线与列距，不靠交替底色（打印时还要 print-color-adjust）。 */
+#quarto-document-content .table-striped > tbody > tr:nth-of-type(odd) > * {
+  background-color: transparent;
+}
+
+/* 任务列表：checkbox 跟强调色，不加卡片。 */
+#quarto-document-content input[type="checkbox"] {
+  accent-color: var(--action-color);
+  margin-inline-end: 0.4em;
+}
+
+/* 脚注：比正文小一档（17px → 14px），顶部一条通栏发丝线与正文分开。 */
+#quarto-document-content .footnotes {
+  margin-top: 3rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--card-border);
+  font-size: 0.875rem;
+  line-height: 1.7;
+  color: var(--text-secondary);
+}
+#quarto-document-content .footnotes ol {
+  padding-inline-start: 1.25rem;
+  margin-bottom: 0;
+}
+#quarto-document-content .footnotes li + li {
+  margin-top: 0.35rem;
+}
+#quarto-document-content .footnotes a {
+  color: var(--text-secondary);
+}
+
+/* ---------- 引用块（上下各一条通栏发丝线 + 正文色，无底色、无竖线；书籍引文而非灰卡） ----------
+   横线规则：全书正文里的分隔一律是「通栏 1px 卡片发丝线」，与表格线、顶栏底边同一档颜色；
+   引用块左右贯通正文列，靠这两条线界定范围，不再用左侧 2px 竖条（竖条与通栏规则相斥）。 */
 blockquote,
 blockquote.blockquote {
-  font-size: 0.9375rem; /* 略小于正文（次要提示定位），并压掉 Quarto .blockquote 命中的 Bootstrap 1.25rem */
-  margin: 1.375rem 0;
-  border-left: 3px solid var(--quote-border);
-  background-color: var(--quote-bg);
-  color: var(--text-secondary);
-  padding: 0 1rem;
+  font-size: inherit;
+  margin: 1.75rem 0;
+  /* Quarto 默认给引用块画 4px 左竖条，这里显式清零，否则上下横线之外还挂着一根竖墙。 */
+  border: 0;
+  border-top: 1px solid var(--card-border);
+  border-bottom: 1px solid var(--card-border);
+  background-color: transparent;
+  color: var(--body-color);
+  padding: 1.1rem 0 1.15rem;
   font-style: normal;
 }
-/* 分隔线（---）样式与节奏统一在下方「正文排版」段定义（docs 风：每个小节标题前一条细线，上方 3.375rem） */
 
 /* ---------- 正文组件润色 ---------- */
-/* 正文链接：强调色 + 细下划线 */
+/* 正文链接：常态与正文同色 + 下划线；hover 才转为 accent，underline 用 action 色 */
 #quarto-document-content a {
   color: var(--text-link);
   text-decoration: underline;
   text-decoration-color: var(--text-underline);
   text-decoration-thickness: 1px;
-  text-underline-offset: 0.2em;
+  text-underline-offset: 0.18em;
 }
 #quarto-document-content a:hover {
-  color: var(--link-color);
-  text-decoration-color: var(--link-underline);
+  color: var(--link-hover-color);
+  text-decoration-color: var(--action-color);
 }
-/* 图片 / 图：圆角 + 细边 + 居中图注 */
+/* 图片 / 图：小圆角 + 细边 + 居中图注 */
 #quarto-document-content img:not(.no-border) {
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-sm);
   border: 1px solid var(--code-border);
   max-width: 100%;
 }
-#quarto-document-content figure figcaption {
+#quarto-document-content figure figcaption,
+#quarto-document-content .quarto-float-caption,
+#quarto-document-content .figure-caption {
   color: var(--text-secondary);
-  font-size: 0.88rem;
+  font-size: 0.875rem;
+  line-height: 1.65;
   text-align: center;
   margin-top: 0.5rem;
 }
+/* MathJax：行内公式默认缩到正文的 94%，夹在中文里会显得「小一号」；
+   拉到 1em 与正文同档，display 公式单独给上下呼吸。 */
+/* MathJax 会把 94% 写进 mjx-container 的行内 style，样式表必须 !important 才压得住。 */
+#quarto-document-content mjx-container {
+  font-size: 1em !important;
+}
+mjx-container[display="true"] {
+  margin: 1.3rem 0;
+}
+
+/* 源码模态（code-tools）：Bootstrap 默认 1000px，平板宽度下会顶满整屏。
+   这里在 ≥576px 时封顶并留出 1rem 边距；更窄沿用 Bootstrap 的 .5rem 边距。 */
+@media (min-width: 576px) {
+  #quarto-embedded-source-code-modal .modal-dialog {
+    max-width: min(1000px, calc(100vw - 2rem));
+  }
+}
+
+/* 图片灯箱（GLightbox，format.html.lightbox: true 时启用）
+   默认遮罩 0.7 黑、页面图注会从图片后面透出来，读起来像「标签贴错位置」；
+   这里加深遮罩把图单独抬出来，关闭/翻页按钮统一成白描边胶囊。 */
+.glightbox-container .goverlay {
+  background: rgba(0, 0, 0, 0.86);
+}
+.glightbox-container .gbtn {
+  background: rgba(0, 0, 0, 0.45);
+  border-radius: 999px;
+}
+.glightbox-container .gbtn:hover,
+.glightbox-container .gbtn:focus-visible {
+  background: rgba(0, 0, 0, 0.7);
+}
+.glightbox-container .gbtn svg path {
+  fill: #fff;
+}
+.glightbox-container .gslide-image img {
+  border-radius: var(--radius-sm);
+}
+/* 透明底的 SVG（品牌标记、图表）在深色遮罩上会「消失」：给矢量图垫白卡，
+   位图不加任何装饰，避免给照片套白边。 */
+.glightbox-container .gslide-image img[src$=".svg"],
+.glightbox-container .gslide-image img[src*=".svg?"] {
+  background: #fff;
+  padding: 0.9rem;
+  box-sizing: border-box;
+}
+
 /* jupyter 单元的图必须用 IPython.display.HTML 输出保持 SVG 内联：image/svg+xml 输出会被
    Quarto 外置成 <img>，无法继承站点 data-bs-theme 明暗与文档字体。text/html 输出不被
    Quarto 识别为图像，fig-cap 退化为图后一个裸 <p>，这里按 figcaption 同款图注样式居中。 */
 #quarto-document-content .cell-output-display > svg.coords-grid + p {
   color: var(--text-secondary);
-  font-size: 0.88rem;
+  font-size: 0.875rem;
   text-align: center;
   margin-top: 0.5rem;
 }
 /* mermaid / dot 图表样式见 mermaid.css（SVG 居中规则已迁入） */
-/* 坐标图：GitHub 文档图的做法是抬起一块浅底、不加实线外框。
+/* 坐标图：常见文档图的做法是抬起一块浅底、不加实线外框。
    内联 SVG 用 currentColor，跟着正文颜色走；独立 svg 文件再用
    prefers-color-scheme 兜住系统明暗。 */
 #quarto-document-content :is(figure, .cell-output-display) svg.coords-grid {
@@ -118,7 +220,7 @@ blockquote.blockquote {
   height: auto;
   color: var(--body-color);
   background: var(--surface-raised);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   padding: 0.75rem;
   box-sizing: border-box;
 }
@@ -127,6 +229,15 @@ blockquote.blockquote {
 #quarto-document-content section :is(.code-copy-outer-scaffold, .code-with-filename, pre) + :is(p, ul, ol) {
   font-family: var(--ui-font);
 }
+/* 行内代码遇到无空格的类型名（std::array<std::array<CellType, 3>, 3>）时，
+   窄屏会把正文列顶宽；此时允许行内代码换行，桌面保持原样。 */
+@media (max-width: 575.98px) {
+  #quarto-document-content :is(p, li, dd, td, th) code {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+}
+
 /* 键盘键 */
 #quarto-document-content kbd {
   font-family: var(--mono-font);
@@ -157,23 +268,28 @@ dd {
   color: var(--text-secondary);
 }
 #quarto-document-content details.answer-disclosure {
-  border: 1px solid var(--card-border);
-  border-radius: var(--radius-md);
-  padding: 0.6rem 1rem;
-  margin: 1.2rem 0;
+  border: 0;
+  border-top: 1px solid var(--card-border);
+  border-bottom: 1px solid var(--card-border);
+  border-radius: 0;
+  background: transparent;
+  padding: 0.7rem 0;
+  margin: 1.4rem 0;
 }
 /* 摘要文字用正文色；折叠三角显式着色——部分浏览器的 marker 不跟随文字色，
    暗色底上会以黑色渲染导致消失。 */
 #quarto-document-content details.answer-disclosure > summary {
   cursor: pointer;
   color: var(--body-color);
+  font-size: 0.9375rem;
+  line-height: 1.5;
 }
 #quarto-document-content details.answer-disclosure > summary::marker,
 #quarto-document-content details.answer-disclosure > summary::before {
   color: var(--body-color);
 }
 #quarto-document-content details.answer-disclosure[open] > summary {
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.6rem;
 }
 
 /* ---------- 正文排版 ---------- */
@@ -201,19 +317,19 @@ html {
 ::selection {
   background-color: var(--selection-bg);
 }
-/* 键盘导航焦点可见 */
+/* 键盘导航焦点可见：用 action 色，不把正文链接染蓝 */
 :focus-visible {
-  outline: 2px solid var(--link-color);
+  outline: 2px solid var(--action-color);
   outline-offset: 2px;
   border-radius: 2px;
 }
-/* 列表项间距：li+li 0.625rem、嵌套列表上距 0.625rem（docs 节奏；仅正文内容，不碰侧栏） */
+/* 列表项间距：li+li 0.5rem、嵌套列表上距 0.5rem（仅正文内容，不碰侧栏） */
 #quarto-document-content li + li {
-  margin-top: 0.625rem;
+  margin-top: 0.5rem;
 }
 #quarto-document-content li > ul,
 #quarto-document-content li > ol {
-  margin-top: 0.625rem;
+  margin-top: 0.5rem;
 }
 /* 列表 marker（圆点/序号）：显式用次要文字色，暗色底上浏览器默认 marker 可能
    以黑色渲染导致消失。 */
@@ -262,7 +378,7 @@ code {
   text-autospace: no-autospace;
 }
 
-/* GitHub Markdown 正文约束：普通段落使用正文列的实际宽度，组件不撑破三栏布局。
+/* Markdown 正文约束：普通段落使用正文列的实际宽度，组件不撑破三栏布局。
    页面列宽由 Quarto grid 与 --content-width 决定；不要再用 75ch 对段落做第二次限宽。 */
 #quarto-document-content {
   max-width: min(100%, var(--content-width));
@@ -278,7 +394,7 @@ code {
 #quarto-document-content hr {
   border: 0;
   border-top: 1px solid var(--card-border);
-  margin: 2rem 0;
+  margin: 2.5rem 0;
   opacity: 1;
 }
 /* 锚点 / 深链跳转后的目标标题轻微高亮，便于定位（复用行 hover 的浅强调底） */