/* ================================================================ custom.scss — 文章正文格式增强（跨项目共享）使用场景： 1. 本前端项目：layers/custom/nuxt.config.ts css 数组全局加载，作用于 rechText.vue 渲染的 .entry-content.markdown-body.single-content 2. 另一项目：format-enhance.js 生成的 .gq-callout / .gq-key-point / .gq-highlight / .gq-step-series HTML 块 3. 后端：纯 Gutenberg HTML 输出的 figure.wp-block-pullquote / figure.wp-block-table 等块 ⚠️ 切勿删除看似前端未匹配的规则（Part B/C/F）——它们在后端/另一项目有效。可改范围：仅本文件。不要改 layers/base、main.scss、rechText.vue 等。 Part A-F：跨项目复用的容器样式（不带文章正文前缀） Part G-I：文章正文专属样式（带 .entry-content.markdown-body.single-content 前缀） ================================================================ */ /* ================================================================ 设计 Token 在文章正文根上集中定义，子元素自动继承。容器（Part A/D/E/F）可在自身覆盖；跨项目使用时 fallback 生效。 ================================================================ */ .entry-content.markdown-body.single-content { /* 语义色（callout/key-point/highlight 的边框与背景） */ --gq-c-tip: hsl(210, 80%, 55%); --gq-c-note: hsl(220, 8%, 55%); --gq-c-warning: hsl( 30, 90%, 50%); --gq-c-keypoint: hsl( 38, 92%, 50%); --gq-c-highlight: hsl(165, 70%, 45%); /* 间距节奏 */ --gq-space-md: 1rem; --gq-space-lg: 1.25rem; --gq-space-xl: 1.5rem; /* 排版 */ --gq-lh-body: 1.8; /* 中文正文行高（行业推荐 1.6-1.8） */ --gq-lh-tight: 1.65; /* 容器内紧凑行高 */ --gq-lh-h2: 1.3; --gq-lh-h3: 1.35; --gq-lh-h4: 1.4; --gq-lh-h5: 1.5; --gq-tracking: 0.02em; /* 标题层级 —— H2-H5 完整 token */ --gq-h2-size: 1.75em; --gq-h2-weight: 700; --gq-h2-bar: 4px; /* H2 左侧主色竖条宽度 */ --gq-h2-pad: 0.75em; /* H2 padding-left（给竖条让位） */ --gq-h3-size: 1.3em; /* vendor 1.25em → 1.3em */ --gq-h3-weight: 700; /* vendor 600 → 700 */ --gq-h3-mute: 92%; /* currentColor 百分比；v2 上调自 85% 保 WCAG AAA */ --gq-h4-size: 1.1em; --gq-h4-weight: 600; /* OpenType 标准 semibold（vendor 600），跨字体一致；曾试 650 但系统字体舍入不一致 */ --gq-h5-size: 0.95em; /* 比正文 1em 略小，形成反差 */ --gq-h5-weight: 700; --gq-h5-tracking: 0.05em; --gq-heading-accent: var(--el-color-primary, currentColor); /* light #4945ff / dark #5EA500；currentColor fallback 保最坏可见 */ } /* ---------------------------------------------------------------- Part A — Callout 提示框 HTML:

...

---------------------------------------------------------------- */ .gq-callout { margin: var(--gq-space-md, 1rem) 0; padding: 0.85rem 1.15rem; border-left: 3px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 0 8px 8px 0; background: transparent; color: inherit; } .gq-callout__body { font-size: 0.9375rem; line-height: var(--gq-lh-tight, 1.65); color: color-mix(in srgb, currentColor 82%, transparent); } .gq-callout__body > *:first-child { margin-top: 0; } .gq-callout__body > *:last-child { margin-bottom: 0; } .gq-callout--tip { border-left-color: color-mix(in srgb, currentColor 35%, var(--gq-c-tip, hsl(210, 80%, 55%))); } .gq-callout--note { border-left-color: color-mix(in srgb, currentColor 35%, var(--gq-c-note, hsl(220, 8%, 55%))); } .gq-callout--warning { border-left-color: color-mix(in srgb, currentColor 35%, var(--gq-c-warning, hsl(30, 90%, 50%))); } /* ---------------------------------------------------------------- Part B — Pullquote 引述（后端 Gutenberg 用） HTML:

...

设计：纯背景色块 + 斜体字（取消 v1 的左侧竖线，避免与 H2/callout 形成竖线过载） blockquote 的 border-left 必须用 !important 原因：markdown-body-overrides.scss:13 对 .markdown-body blockquote 设了 border-left: 0.25em solid ... !important 补充事实：markdown-body-overrides.scss:30 对 .markdown-body figure 设了 margin-right: 0 !important; margin-left: 0 !important; 本规则的 margin: var(--gq-space-lg, 1.25rem) 0 实际只剩 top/bottom 生效。跨项目（无该 overrides 文件）时左右外距仍按 fallback 0 生效。 ---------------------------------------------------------------- */ .entry-content.markdown-body.single-content { & figure.wp-block-pullquote { font-size: inherit; margin: var(--gq-space-lg, 1.25rem) 0; padding: 1rem 1.5rem; background: color-mix(in srgb, currentColor 8%, transparent); border-radius: 8px; & blockquote { border-left: none !important; margin: 0; padding: 0; font-style: italic; color: color-mix(in srgb, currentColor 75%, transparent); } } } /* ---------------------------------------------------------------- Part C — 表格 figure 包装器（后端 Gutenberg 用） HTML:

...

补充事实：markdown-body-overrides.scss:30 对 .markdown-body figure 设了 margin-right: 0 !important; margin-left: 0 !important; 本规则的 margin: var(--gq-space-md, 1rem) 0 实际只剩 top/bottom 生效。跨项目（无该 overrides 文件）时左右外距仍按 fallback 0 生效。 ---------------------------------------------------------------- */ .entry-content.markdown-body.single-content { & figure.wp-block-table { margin: var(--gq-space-md, 1rem) 0; overflow-x: auto; } } /* ---------------------------------------------------------------- Part D — 重点引用（KeyPoint） HTML:

...

由另一项目的 format-enhance.js KEY_INFO_PATTERNS 触发 ---------------------------------------------------------------- */ .gq-key-point { margin: var(--gq-space-lg, 1.25rem) 0; padding: 0.85rem 1.15rem; background: color-mix(in srgb, var(--gq-c-keypoint, hsl(38, 92%, 50%)) 10%, transparent); border-radius: 8px; line-height: var(--gq-lh-tight, 1.65); } .gq-key-point > *:first-child { margin-top: 0; } .gq-key-point > *:last-child { margin-bottom: 0; } /* ---------------------------------------------------------------- Part E — 段落高亮（Highlight） HTML:

...

由另一项目的 format-enhance.js DATA_POINT_PATTERNS 触发，max 2/篇配色 teal/青绿色 hsl(165, 70%, 45%) 原因：必须与 Part A Callout--tip 的蓝色 hsl(210, 80%, 55%) 区分，否则作者无法视觉分辨"提示框"和"高亮段落" ---------------------------------------------------------------- */ .gq-highlight { margin: var(--gq-space-lg, 1.25rem) 0; padding: 0.85rem 1.15rem; background: color-mix(in srgb, var(--gq-c-highlight, hsl(165, 70%, 45%)) 10%, transparent); border-radius: 8px; line-height: var(--gq-lh-tight, 1.65); } .gq-highlight > *:first-child { margin-top: 0; } .gq-highlight > *:last-child { margin-bottom: 0; } /* ---------------------------------------------------------------- Part F — 步骤序列（StepSeries） HTML:

...

由另一项目的 format-enhance.js 连续 (h2/h3 + ol) 结构触发注：在本前端项目中，base 层 gq-step-heading.css 用更高特异性 (0,0,3,0) 覆盖了部分规则（如 ::before 改为数字徽章）。在另一项目中本文件是主样式。请勿删除。 ---------------------------------------------------------------- */ .gq-step-series { margin: var(--gq-space-xl, 1.5rem) 0; } .gq-step-series__list { display: flex; flex-direction: column; gap: var(--gq-space-md, 1rem); } .gq-step-item { position: relative; padding: 0.75rem 1rem 0.9rem 2.25rem; background: color-mix(in srgb, currentColor 4%, transparent); border-radius: 6px; line-height: var(--gq-lh-tight, 1.65); } .gq-step-item::before { content: ''; position: absolute; left: 0.85rem; top: 1.1rem; bottom: 1.1rem; width: 2px; background: color-mix(in srgb, currentColor 25%, transparent); border-radius: 1px; } .gq-step-item > *:first-child { margin-top: 0; } .gq-step-item > *:last-child { margin-bottom: 0; } /* ---------------------------------------------------------------- Part F.1 — 修复 base 层把最后 step-item padding-bottom 清零的 bug 原因：layers/base/app/assets/css/guaqi-blocks/gq-step-heading.css:63-70 的 .gq-step-series > .gq-step-series__list > .wp-block-guaqi-step-item:last-child { padding-bottom: 0 } （特异性 (0,4,0)）把最后一个 item 的 padding-bottom 清零，导致文字底部贴 list 底边，与其他 item（padding-bottom 1.5rem）视觉节奏不一致。修复：用 .entry-content.markdown-body.single-content 前缀（3 classes）提升特异性到 (0,7,0)，压制 base 的 (0,4,0)。范围：仅覆盖本项目实际触发的选择器（wp-block-guaqi-step-item），不动 base 层 63-70 行的另外 5 个 .wp-block-group 分支（无对应 HTML）。跨项目：在另一项目（无 base 覆盖）中，本规则也会让最后 item 的 padding-bottom 从 Part F 的 0.9rem 提升到 1.5rem，多 0.6rem 底部呼吸。可接受（甚至可视为"步骤序列结束"的视觉提示）。 ---------------------------------------------------------------- */ .entry-content.markdown-body.single-content .gq-step-series > .gq-step-series__list > .wp-block-guaqi-step-item:last-child { padding-bottom: 1.5rem; } /* ---------------------------------------------------------------- Part G — 中文段落排版优化来源：guaqi-client-update2.md 修复 github-markdown-css 默认 line-height 1.5 对中文偏紧凑的问题修复点（vs 旧版）： - 旧版 line-height: 1.8 !important 会污染 callout/key-point/ highlight/step-item 内的 p（这些容器期望 1.65 紧凑行高） - 新版用 :where() 列举容器，在其内部覆盖为 1.65； :where 保持零特异性，源序靠后即可胜出 - 移除 !important（specificity (0,3,1) 已稳赢 vendor (0,1,1)） ---------------------------------------------------------------- */ .entry-content.markdown-body.single-content { & p { line-height: var(--gq-lh-body); margin-bottom: 1em; letter-spacing: var(--gq-tracking); word-break: break-word; } /* 容器内 p 紧凑行高覆盖（修复旧版污染 bug） */ & :where(.gq-callout__body, .gq-key-point, .gq-highlight, .gq-step-item) p { line-height: var(--gq-lh-tight); } /* 表格单元格内 p 更紧凑（数据表格易读性优化） */ & :where(figure.wp-block-table) p { line-height: 1.5; } /* 容器内 last-child p 不留下方间距原因：Part G 主规则特异性 (0,3,1) 压住了 Part D/E 的 .gq-XXX > *:last-child (0,2,0)，导致容器内 p 仍有 1em 下方间距，破坏容器 padding 提供的上下对称呼吸。这里用 :where() 包裹容器名（零特异性贡献），靠 :last-child 提升 pseudo-class 特异性到 (0,4,1)，稳赢 Part G 主规则。范围：.gq-highlight + .gq-key-point（结构相同）+ figure.wp-block-pullquote + .gq-step-item。 .gq-step-item 加入后：base 层 padding-top: 0 + Round 3 修复后的 padding-bottom: 1.5rem + p margin-bottom: 0 → 顶部紧贴数字徽章、底部由 padding 提供呼吸，与其他容器节奏一致。不含 .gq-callout__body（padding 大 + 字号 0.9375rem 紧凑，问题本就不明显）。精度：只覆盖 last-child，保留容器内多 p 之间的段落间距（防御性）。 */ & :where(.gq-highlight, .gq-key-point, figure.wp-block-pullquote, .gq-step-item) p:last-child { margin-bottom: 0; } } /* ---------------------------------------------------------------- Part H — 内联代码样式增强修复行内

 在中文段落中显得突兀的问题
   不影响  代码块（保持 github-markdown-css 原样）
   ---------------------------------------------------------------- */

.entry-content.markdown-body.single-content {
  & code {
    background: color-mix(in srgb, currentColor 6%, transparent);
    padding: 0.15em 0.4em;
    border-radius: 3px;
    font-size: 0.875em;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  }

  & pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
  }
}


/* ----------------------------------------------------------------
   Part I — H2-H5 标题视觉层级系统（v2 纯排版方案）
   原因：vendor H2(1.5em)/H3(1.25em) 字重同为 600 区分不足；
        H4(1em)/H5(0.85em) 与正文几乎无区分；旧版 Part I 只覆盖 H2/H3。

   v2 策略（取消 v1 的 ::before 装饰记号 — 多行标题会脱节/贯穿）：
     - H2：左侧主色竖条（border-left，多行自然扩展），唯一带颜色的层级
     - H3：纯排版（字号 1.3em + 字重 700 + 颜色弱化 8%）
     - H4：纯排版（字号 1.1em + 字重 600 标准 semibold，中性次级）
     - H5：纯排版（字号 0.95em 比正文略小 + 字重 700 + letter-spacing，v4 移除 mute 保 AAA）

   特异性：本组规则 (0,3,1) 稳赢 vendor (0,1,1)；
          gq-step-heading.css (0,5,1) 仍压制本规则控制 step 内 H2（设计意图）；
          :where() 排除嵌套容器不抬升主规则特异性。
   配色：var(--el-color-primary) 自动随明暗主题切换
        （light #4945ff / dark #5EA500，由 pageData.js 运行时注入）。

   v2 修复（vs v1）：
   - 取消 H3/H4/H5 的 ::before 装饰（多行标题视觉脱节/像 blockquote/与 markdown # 语义冲突）
   - H2 删除冗余的底部 border-bottom，只保留左竖条
   - 用 :where() 排除嵌套容器，避免 :not() 抬升特异性到 (0,6,1) 破坏 step-series
   - .has-background 标题取消竖条让色块自己说话
   - .has-text-align-center/right 标题取消竖条避免视觉违和
   - 补齐 base 层缺失的 .has-text-align-* baseline（base 既有缺陷，custom 层补）
   ---------------------------------------------------------------- */

.entry-content.markdown-body.single-content {
  & h2 {
    font-size: var(--gq-h2-size);
    font-weight: var(--gq-h2-weight);
    line-height: var(--gq-lh-h2);
    margin-top: 2em;
    margin-bottom: 1em;
    padding-left: var(--gq-h2-pad);
    border-left: var(--gq-h2-bar) solid var(--gq-heading-accent);

    &:first-child { margin-top: 0; }

    /* .has-background 已有 base 层 padding（1.25em 2.375em），取消竖条让色块说话 */
    &.has-background {
      padding-left: 2.375em;
      border-left: none;
    }

    /* 居中/右对齐标题左竖条很违和，取消 */
    &.has-text-align-center,
    &.has-text-align-right {
      padding-left: 0;
      border-left: none;
    }
  }

  & h3 {
    font-size: var(--gq-h3-size);
    font-weight: var(--gq-h3-weight);
    line-height: var(--gq-lh-h3);
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    color: color-mix(in srgb, currentColor var(--gq-h3-mute), transparent);

    &:first-child { margin-top: 0; }
  }

  & h4 {
    font-size: var(--gq-h4-size);
    font-weight: var(--gq-h4-weight);
    line-height: var(--gq-lh-h4);
    margin-top: 1.25em;
    margin-bottom: 0.6em;

    &:first-child { margin-top: 0; }
  }

  & h5 {
    font-size: var(--gq-h5-size);
    font-weight: var(--gq-h5-weight);
    line-height: var(--gq-lh-h5);
    margin-top: 1em;
    margin-bottom: 0.5em;
    letter-spacing: var(--gq-h5-tracking);

    &:first-child { margin-top: 0; }
  }

  /* 嵌套容器内 H2：取消竖条避免双重装饰。
     :where() 特异性恒为 0，不抬升主规则，gq-step-heading.css 仍能接管 step-series。 */
  & :where(.gq-callout, .gq-callout__body, .gq-key-point, .gq-highlight, .gq-step-series, .gq-step-item) h2 {
    padding-left: 0;
    border-left: none;
  }
}

/* base 层未定义的对齐类（既有缺陷），custom 层补齐 */
.entry-content.markdown-body.single-content {
  .has-text-align-center { text-align: center; }
  .has-text-align-right  { text-align: right; }
  .has-text-align-left   { text-align: left; }
}

/* 高对比度模式：H3 恢复 full color（H5 v4 已移除 mute，无需恢复） */
@media (prefers-contrast: more) {
  .entry-content.markdown-body.single-content {
    & h3 { color: currentColor; }
  }
}

/* 移动端响应式：缩字号（与 base index.scss @media max-width: 768px 断点对齐） */
@media (max-width: 48rem) {
  .entry-content.markdown-body.single-content {
    & h2 {
      font-size: 1.5em;
      margin-top: 1.5em;
    }
    & h3 { font-size: 1.15em; }
    & h4 { font-size: 1.05em; }
  }
}


/* ----------------------------------------------------------------
   Part J — 全站背景图（仅亮色模式）
   - html.dark 时不生效（保持 var(--el-bg-color-page) 纯色）
   - 图片源：远程 CDN（cdn.hello123.com/wp-content/uploads/2026/07/bg-1.jpg）
     OSS 控制内容；改图不用重新部署前端
     本地 ./bg-1.jpg 作为回滚备份保留
   - 用 body::before + position:fixed 而非 background-attachment:fixed
     原因：iOS Safari 对 background-attachment:fixed 支持不可靠
   - body 设 fallback background-color 防 CDN 故障时露出白色画布
   - .site 强制透明，露出底层伪元素
   - 当前 CDN 图片为 96×66 px 缩略图，cover 拉伸呈现模糊软化效果（用户已接受）
   ---------------------------------------------------------------- */

/* fallback：图片加载失败时显示页面底色，避免白色画布闪烁
   带兜底值防止 SSR 首屏 html 类名竞态下变量未定义 */
html:not(.dark) body {
  background-color: var(--el-bg-color-page, #f2f3f5);
}

/* 实际壁纸层：position:fixed 让 iOS Safari 也能正确固定 */
html:not(.dark) body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('https://cdn.hello123.com/wp-content/uploads/2026/07/bg-1.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
}

/* 让 .site 透明以露出底层伪元素。
   特异性 (0,2,1) 稳赢 UnoCSS 的 .bg-[--gq-page-bg] (0,1,0)。
   注意：会同时覆盖 builder 后台设置的 $serverSettings...backgroundCSS，
   若以后需要恢复 server 端控制，删除此规则即可。 */
html:not(.dark) .site {
  background-color: transparent;
}

/* 打印场景：浏览器默认就不打印 background-image，这里显式移除伪元素 */
@media print {
  html:not(.dark) body::before {
    display: none;
  }
}

/* 用户开启系统级"增加对比度"（macOS Increase Contrast / iOS Smart Invert /
   Android High Contrast Text / Windows Contrast Themes 等）时，
   切回纯色背景，避免模糊背景图干扰阅读 */
@media (prefers-contrast: more) {
  html:not(.dark) body::before {
    display: none;
  }
  html:not(.dark) .site {
    background-color: var(--el-bg-color-page, #f2f3f5);
  }
}

游客(id:0)

积分

余额