hexo-theme-stellar 1.42.0 → 1.43.0

package/source/css/_custom.styl

@@ -8,25 +8,24 @@ $ff-codeblock = convert(hexo-config('style.font-family.codeblock'))
 
 // font size
 $fs-root = convert(hexo-config('style.font-size.root'))
-$fs-15 = .9375rem
-$fs-14 = .875rem
-$fs-13 = .8125rem
-$fs-12 = .75rem
+$fs-15 = 'calc(%s - 1px)' % var(--fs-content-base)
+$fs-14 = 'calc(%s - 2px)' % var(--fs-content-base)
+$fs-13 = 'calc(%s - 3px)' % var(--fs-content-base)
+$fs-12 = 'calc(%s - 4px)' % var(--fs-content-base)
 
-$fs-body = convert(hexo-config('style.font-size.body'))
 $fs-code = convert(hexo-config('style.font-size.code'))
 $fs-codeblock = convert(hexo-config('style.font-size.codeblock'))
 
-$fsh1 = 'calc(%s + 9px)' % $fs-body
-$fsh2 = 'calc(%s + 11px)' % $fs-body
-$fsh3 = 'calc(%s + 7px)' % $fs-body
-$fsh4 = 'calc(%s + 4px)' % $fs-body
-$fsh5 = 'calc(%s + 2px)' % $fs-body
+$fsh1 = 'calc(%s + 9px)' % var(--fs-content-base)
+$fsh2 = 'calc(%s + 11px)' % var(--fs-content-base)
+$fsh3 = 'calc(%s + 7px)' % var(--fs-content-base)
+$fsh4 = 'calc(%s + 4px)' % var(--fs-content-base)
+$fsh5 = 'calc(%s + 2px)' % var(--fs-content-base)
 
-$fsp0 = 'calc(%s - 0px)' % $fs-body
-$fsp1 = 'calc(%s - 1px)' % $fs-body
-$fsp2 = 'calc(%s - 2px)' % $fs-body
-$fsp3 = 'calc(%s - 3px)' % $fs-body
+$fs-content-0 = 'calc(%s - 0px)' % var(--fs-content-base)
+$fs-content-1 = 'calc(%s - 1px)' % var(--fs-content-base)
+$fs-content-2 = 'calc(%s - 2px)' % var(--fs-content-base)
+$fs-content-3 = 'calc(%s - 3px)' % var(--fs-content-base)
 
 // site main
 $site-background-image = hexo-config('style.site.background-image')
@@ -56,11 +55,13 @@ $corner-shape = convert(hexo-config('style.corner-shape'))
 
 // 可以动态变化的属性
 :root
+  --fs-root: $fs-root
+  --fs-content-base: var(--fs-root)
+  --fs-content: var(--fs-content-base)
   --width-main: 720px
-  --fsp: $fs-body
-  --fsh2: 'calc(%s + 11px)' % var(--fsp)
-  --fsh3: 'calc(%s + 7px)' % var(--fsp)
-  --fsh4: 'calc(%s + 4px)' % var(--fsp)
+  --fsh2: 'calc(%s + 11px)' % var(--fs-content)
+  --fsh3: 'calc(%s + 7px)' % var(--fs-content)
+  --fsh4: 'calc(%s + 4px)' % var(--fs-content)
   
   // 侧边栏文字内容宽度
   --side-content-width: 224px
@@ -73,8 +74,8 @@ $corner-shape = convert(hexo-config('style.corner-shape'))
   // 右栏宽度增量（在 --width-sidebar 基础上加宽）
   --rightbar-width-extra: calc(var(--gap-base) * 2)
   
-  --gap-p: 'calc(%s + 4px)' % $fs-body // gap for paragraph
-  --gap-p-compact: 'calc(%s * 0.75)' % $fs-body
+  --gap-p: 'calc(%s + 4px)' % var(--fs-content-base) // gap for paragraph
+  --gap-p-compact: 'calc(%s * 0.75)' % var(--fs-content-base)
   // desktop 2k or larger
   @media screen and (min-width: $device-2k)
     --width-main: 780px
@@ -85,6 +86,7 @@ $corner-shape = convert(hexo-config('style.corner-shape'))
   @media screen and (max-width: $device-tablet)
     --side-content-width: 188px
   @media screen and (max-width: $device-mobile-max)
+    --fs-root: 'calc(%s + 2px)' % $fs-root
     --side-content-width: 224px
 
 // shadow

package/source/css/_plugins/lazyload.styl

@@ -18,18 +18,21 @@ img:not([src])
     min-height: 4rem
 
 // 加载占位动画
-img.lazy.loading + .lazy-icon
-  position: absolute
+.lazy-icon
   width: $loadingImageSize
   height: $loadingImageSize
   max-width: 100%
   max-height: 100%
+  // 蒙版上色：SVG 作为 mask（只取形状），颜色由 background-color 提供，
+  // 避免 currentColor 在 SVG-as-image 场景（Safari）退化为黑色
+  background-color: var(--theme)
+  svg-mask-icon(var(--icon-loading, url("https://api.iconify.design/eos-icons:three-dots-loading.svg?color=%231cd0fd")))
+
+img.lazy.loading + .lazy-icon
+  position: absolute
   top: 50%
   left: 50%
   transform: translateX(-50%) translateY(-50%)
-  background-size: contain
-  background-repeat: no-repeat
-  background-position: center
 
 // 加载完成
 img.lazy.loaded + .lazy-icon,

package/source/css/comments/utterances.styl

@@ -2,5 +2,5 @@
   margin: 0 -4px
   width: 'calc(100% + %s)' % 8px
 
-.related-wrap#comments .cmt-body svg.loading
-  top: 62px
+.related-wrap#comments .cmt-body .lazy-icon
+  top: 62px

package/source/css/comments/waline.styl

@@ -1,3 +1,7 @@
+@import '../_defines/const'
+@import '../_custom'
+@import '../_defines/func'
+
 .cmt-body
   .wl-panel
     margin: 0.5em 0 !important
@@ -66,3 +70,23 @@
   :root:not([data-theme]) &
     @media (prefers-color-scheme: dark)
       ondark()
+
+// override
+.md-text .cmt-body.waline
+  p
+    font-size: var(--waline-font-size)
+    line-height: 1.5
+    margin: 0
+  .wl-reply-to *
+    line-height: 1.5
+  .wl-header label, .wl-input
+    font-size: 0.875em
+  .wl-editor
+    font-size: var(--waline-font-size)
+    font-family: $ff-body
+  .wl-content
+    .wl-emoji, .vemoji
+      height: 2.5em
+    img:not(.wl-emoji):not(.vemoji)
+      margin-top: 0.5em
+      margin-bottom: 0.5em

package/source/css/plugins/mermaid.styl

@@ -7,17 +7,36 @@ pre.mermaid
   justify-content: center;
   font-family: $ff-body
 
-.mermaid span,text
+.mermaid span,
+.mermaid text
   font-family: $ff-body
 
 .mermaid .edgeLabel
   padding: 4px
   background-color: var(--background) !important
+  color: var(--text-p1) !important
+
+.mermaid .edgeLabel text,
+.mermaid .label text,
+.mermaid .nodeLabel,
+.mermaid .cluster-label text,
+.mermaid .cluster-label span
+  fill: var(--text-p1) !important
+  color: var(--text-p1) !important
 
 .mermaid rect.basic.label-container
   stroke: var(--block-border) !important
   fill: var(--block) !important
 
+.mermaid .node rect,
+.mermaid .node circle,
+.mermaid .node ellipse,
+.mermaid .node polygon,
+.mermaid .node path,
+.mermaid .cluster rect
+  stroke: var(--block-border) !important
+  fill: var(--block) !important
+
 _dark_mermaid()
   .mermaid
     fill: #ccc !important
@@ -42,21 +61,21 @@ _dark_mermaid()
 
 
   .mermaid .label
-    color: #ccc !important
+    color: var(--text-p1) !important
 
 
   .mermaid .cluster-label text
-    fill: #F9FFFE !important
+    fill: var(--text-p1) !important
 
 
   .mermaid .cluster-label span
-    color: #F9FFFE !important
+    color: var(--text-p1) !important
 
 
   .mermaid .label text,
   .mermaid span
-    fill: #ccc !important
-    color: #ccc !important
+    fill: var(--text-p1) !important
+    color: var(--text-p1) !important
 
 
   .mermaid .node rect,
@@ -64,8 +83,8 @@ _dark_mermaid()
   .mermaid .node ellipse,
   .mermaid .node polygon,
   .mermaid .node path
-    fill: #1f2020 !important
-    stroke: #81B1DB !important
+    fill: var(--block) !important
+    stroke: var(--block-border) !important
 
 
   .mermaid .arrowheadPath
@@ -90,16 +109,16 @@ _dark_mermaid()
 
 
   .mermaid .cluster rect
-    fill: hsl(180, 1.5873015873%, 28.3529411765%) !important
-    stroke: rgba(255, 255, 255, 0.25) !important
+    fill: var(--block) !important
+    stroke: var(--block-border) !important
 
 
   .mermaid .cluster text
-    fill: #F9FFFE !important
+    fill: var(--text-p1) !important
 
 
   .mermaid .cluster span
-    color: #F9FFFE !important
+    color: var(--text-p1) !important
 
 
   .mermaid div.mermaidTooltip

package/source/js/icons.js

@@ -4,7 +4,7 @@
  * 服务端 icon() 对非首屏 SVG 图标输出 <svg class="icon" data-icon="ns:key"> 占位符，
  * 本脚本按命名空间拉取构建期生成的 js/icons/{ns}.json，成功后原位替换为完整内联 SVG，
  * 最终 DOM 与全量内联一致，现有 CSS 钩子（搜索三态、菜单渐变、chat 着色等）不受影响。
- * 首屏关键图标（搜索、菜单、leftbar/rightbar、goback）由模板内联，不经过本脚本。
+ * 首屏关键图标（搜索、菜单、leftbar/rightbar、arrow-left）由模板内联，不经过本脚本。
  */
 (function () {
   'use strict';

package/source/js/main.js

@@ -177,7 +177,7 @@ function rebuildToc(scope) {
     return;
   }
   const ol = document.createElement('ol');
-  ol.className = 'toc';
+  ol.className = 'toc ui-collection-adapter';
   const stack = [];
   headings.forEach(function (h) {
     const id = h.id;
@@ -372,6 +372,56 @@ const init = {
       }
     });
   },
+  wikiCover: () => {
+    document.querySelectorAll('.wiki-cover-terminal').forEach(function (terminal) {
+      const code = terminal.querySelector('pre code');
+      const tabs = terminal.querySelectorAll('[role="tab"]');
+      function renderCodes(value) {
+        const lines = value.split(/\r?\n/).filter(function (line) {
+          return line.trim().length > 0;
+        });
+        terminal.dataset.codes = lines.join('\n');
+        code.innerHTML = '';
+        lines.forEach(function (line) {
+          const row = document.createElement('span');
+          row.textContent = line;
+          code.appendChild(row);
+        });
+      }
+      if (tabs.length > 0) {
+        renderCodes(tabs[0].getAttribute('data-codes') || '');
+      }
+      tabs.forEach(function (tab) {
+        tab.addEventListener('click', function () {
+          tabs.forEach(function (item) {
+            const active = item === tab;
+            item.classList.toggle('active', active);
+            item.setAttribute('aria-selected', active ? 'true' : 'false');
+          });
+          renderCodes(tab.getAttribute('data-codes') || '');
+        });
+      });
+      const copy = terminal.querySelector('.wiki-cover-copy');
+      if (copy) {
+        copy.addEventListener('click', function () {
+          const value = terminal.dataset.codes || '';
+          if (!value || !navigator.clipboard) return;
+          navigator.clipboard.writeText(value).then(function () {
+            hud.toast(copy.getAttribute('data-copy-message') || 'Copied', 2500);
+          }).catch(function () {});
+        });
+      }
+    });
+
+    const galaxyCanvases = document.querySelectorAll('.wiki-cover-background.galaxy canvas');
+    const reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduceMotion || galaxyCanvases.length === 0) return;
+    utils.js('/js/plugins/galaxy.js').then(function () {
+      if (stellar.galaxy && typeof stellar.galaxy.mountAll === 'function') {
+        stellar.galaxy.mountAll(galaxyCanvases);
+      }
+    }).catch(function () {});
+  },
   leftbarScroll: () => {
     const container = document.querySelector('.l_left .widgets');
     if (container == null) {
@@ -380,7 +430,7 @@ const init = {
     const PREFIX = 'Stellar.leftbarScroll.';
     const encode = (s) => encodeURIComponent(String(s || ''));
     function scope() {
-      const wikiEl = document.querySelector('.doc-tree[data-wiki]');
+      const wikiEl = document.querySelector('.doc-tree-widget[data-wiki]');
       if (wikiEl != null) {
         return 'wiki:' + encode(wikiEl.getAttribute('data-wiki'));
       }
@@ -409,7 +459,7 @@ const init = {
         return;
       }
       container.scrollTop = parseInt(value, 10) || 0;
-      const link = container.querySelector('a.link.active');
+      const link = container.querySelector('.ui-collection__item.is-active');
       if (link == null) {
         return;
       }
@@ -426,22 +476,27 @@ const init = {
     } catch (e) {}
   },
   navbarPin: () => {
-    // 列表页 navbar top 背景条状态切换：未吸顶为卡片样式（var(--card) + 文章卡片同款阴影），
-    // 吸顶后恢复玻璃效果。在吸顶边界切换 .pinned 类，视觉由 CSS 控制。
+    // 列表页 navbar top 背景条状态切换：未滚动/未吸顶为卡片样式（var(--card) + 文章卡片同款阴影），
+    // 页面滚动达到阈值且吸顶后恢复玻璃效果。在吸顶边界切换 .pinned 类，视觉由 CSS 控制。
     // 吸顶判定直接测 navbar 的实际视口位置，而非用 scrollY 推算：
     // 移动端浏览器顶栏伸缩会改变 scrollY（展开顶栏时 scrollY 减小），
     // 即使 navbar 仍吸顶也可能跌破阈值，导致玻璃效果误消失。
+    // 无轮播区页面（如 wiki）的 navbar 在页面顶部即已吸顶，需额外要求页面实际滚动达到阈值，
+    // 否则默认保持卡片样式；回到顶部（滚动小于阈值）恢复卡片。
     const navbars = document.querySelectorAll('.navbar.top');
     if (navbars.length === 0) {
       return;
     }
     // 视口顶部允许的偏差（px），吸收亚像素/取整误差
     const TOLERANCE = 2;
+    // 页面滚动阈值（px）：未滚动时保持卡片样式，滚动达到该值后才切换玻璃效果
+    const SCROLL_THRESHOLD = 2;
     let states = [];
     function update() {
+      const scrolled = window.scrollY >= SCROLL_THRESHOLD;
       states.forEach((state) => {
         const top = state.navbar.getBoundingClientRect().top;
-        state.bar.classList.toggle('pinned', top <= state.stickyTop + TOLERANCE);
+        state.bar.classList.toggle('pinned', scrolled && top <= state.stickyTop + TOLERANCE);
       });
     }
     function measure() {
@@ -621,6 +676,7 @@ stellar.initPage = function () {
   init.toc();
   init.sidebar();
   init.wikiStart();
+  init.wikiCover();
   init.leftbarScroll();
   init.navbarPin();
   init.relativeDate(document.querySelectorAll('#post-meta time'));

package/source/js/plugins/adaptive-text.js

@@ -1,7 +1,7 @@
 // 文字自适应颜色 DOM 插件
-// 扫描 [data-text-adaptive] 元素，解析背景来源（--cover-url → --bg-url →
+// 扫描 [data-text-adaptive] 元素，解析背景来源（--adaptive-background → --cover-url → --bg-url →
 // background-image → background-color），调用 stellar.color 计算文字颜色，
-// 写入内联 --text-banner 与 --text-banner-theme。
+// 写入内联 --text-banner 与 --text-banner-theme；Wiki 封面另写入主题色蒙版变量。
 // 属性值：
 //   theme（默认）  背景图平均色 lighten/darken（两种变量同色）
 //   contrast       黑白对比（两种变量同色）
@@ -19,6 +19,10 @@ function parseCssUrl(value) {
 
 function resolveBackground(el) {
   var style = window.getComputedStyle(el);
+  var adaptiveBackground = stellar.color.parse(style.getPropertyValue('--adaptive-background'));
+  if (adaptiveBackground) {
+    return { type: 'color', rgb: adaptiveBackground };
+  }
   var cover = parseCssUrl(style.getPropertyValue('--cover-url'));
   if (cover) {
     return { type: 'image', url: cover };
@@ -85,6 +89,39 @@ function setSplitTextColors(el, rgb) {
   }
 }
 
+// Wiki 卡片的 Today 风格内容层使用封面平均色：保留色相，增强弱饱和度后压低明度，
+// 让满不透明蒙版下的白色文字始终可读。变量写到 .wiki-card：蒙版用深色版本，
+// hover 边框使用同源但提高 20 个明度点的版本。
+function setWikiOverlayColor(el, rgb) {
+  var node = el.parentElement;
+  while (node && node.nodeType === 1) {
+    if ((' ' + node.className + ' ').indexOf(' wiki-card ') !== -1) {
+      var themed = stellar.color.enhanceSaturation(rgb, { minSaturation: 0.45, boostBelow: 0.35 });
+      var overlay = stellar.color.darken(themed, 0.26);
+      var border = stellar.color.lighten(themed, 0.46);
+      if (overlay) {
+        node.style.setProperty('--wiki-overlay-color', overlay);
+      }
+      if (border) {
+        node.style.setProperty('--wiki-border-color', border);
+      }
+      return;
+    }
+    node = node.parentElement;
+  }
+}
+
+// Wiki 卡片主题色确定后（包括提取失败时的 CSS 回退）通知索引页。
+// 覆盖层会同时等待原图 load，避免先用默认主题色绘制、再切换为平均色。
+function notifyWikiOverlayReady(el) {
+  if (!el || !el.dispatchEvent || !document.createEvent) {
+    return;
+  }
+  var event = document.createEvent('Event');
+  event.initEvent('wiki-overlay-ready', true, false);
+  el.dispatchEvent(event);
+}
+
 function applyToElement(el) {
   // 用户显式覆盖优先：首次处理时元素已有内联 --text-banner 或内联 color 则跳过
   // （插件自身写入的变量不视为用户覆盖，主题切换重算时需重新应用）
@@ -103,6 +140,10 @@ function applyToElement(el) {
     } else {
       setTextColor(el, styleName, rgb);
     }
+    if (styleName === 'split' && el.parentElement && (' ' + el.parentElement.className + ' ').indexOf(' wiki-card-cover ') !== -1) {
+      setWikiOverlayColor(el, rgb);
+      notifyWikiOverlayReady(el);
+    }
     appliedElements.add(el);
   };
   if (bg.type === 'color') {
@@ -112,6 +153,9 @@ function applyToElement(el) {
     stellar.color.getAverageColor(bg.url, { background: backdrop }).then(function (rgb) {
       if (rgb) {
         apply(rgb);
+      } else if (styleName === 'split' && el.parentElement && (' ' + el.parentElement.className + ' ').indexOf(' wiki-card-cover ') !== -1) {
+        // 平均色提取失败时不写变量，保留 CSS 回退色；但仍须解除 Wiki 覆盖层等待。
+        notifyWikiOverlayReady(el);
       }
     });
   }