hexo-theme-stellar 1.40.0 → 1.41.0

package/source/css/_common/base.styl

@@ -34,14 +34,15 @@ ul,ol
 // table
 table:not([class])
   border-collapse: collapse
-  overflow: auto
+  display: block
+  overflow-x: auto
+  -webkit-overflow-scrolling: touch
   margin: 1rem 0
   max-width: 100%
   vertical-align: text-top
   --fsp: $fsp2
   font-size: var(--fsp)
   scrollbar(0,0)
-  display: table
   th
     background: var(--block)
     border-top: 1px solid var(--block-border)
@@ -50,6 +51,8 @@ table:not([class])
     padding: 4px 1em
     line-height: 1.5
   tr
+    word-break: keep-all
+    white-space: nowrap
     border-bottom: 1px dashed var(--block-border)
     trans()
     &:hover
@@ -57,10 +60,3 @@ table:not([class])
 
   @media screen and (min-width: $device-mobile-max)
     width 100%
-
-  @media screen and (max-width: $device-mobile-max)
-    display: block
-    tr
-      word-break: keep-all
-      white-space:nowrap
-

package/source/css/_common/device.styl

@@ -12,7 +12,7 @@
   grid-column-end: span 3
   --inset: 2rem
   right: 0
-  bottom: calc(var(--inset) * 2)
+  bottom: calc(var(--inset) * 1)
   margin-left: auto
   margin-right: var(--inset)
   float: right
@@ -40,8 +40,8 @@
   box-sizing: border-box
   flex: 0 0 auto
   margin: 0 auto
-  width: 36px
-  height: 36px
+  width: 40px
+  height: 40px
   padding: 4px
   line-height: 0
   font-size: 28px

package/source/css/_components/md-table.styl

@@ -0,0 +1,23 @@
+// 普通 Markdown 表格滚动容器：宽度足够时铺满容器，内容超出时横向滚动
+.md-table-scroll
+  overflow-x: auto
+  -webkit-overflow-scrolling: touch
+  max-width: 100%
+  margin: 1rem 0
+  scrollbar(0,0)
+  > table:not([class])
+    display: table
+    width: 100%
+    max-width: none
+    margin: 0
+    border-collapse: separate
+    border-spacing: 0
+    border: 1px solid var(--block-border)
+    border-radius: $border-card
+    overflow: hidden
+    th
+      border-top: none
+    th, td
+      border-left: 1px solid var(--block-border)
+      &:first-child
+        border-left: none

package/source/css/_components/pages/archives.styl

@@ -81,29 +81,9 @@
   display: flex
   flex-wrap: wrap
   padding: 0
-  margin: 0 -4px
+  margin: 0 -0.5rem
   a.tag
-    display: inline-flex
-    align-items: center
-    position: relative
-    color: var(--text-p2)
-    margin: 4px
-    padding: .5em .75rem
-    border-radius: 4px
-    background: var(--block)
-    font-size: $fs-13
-    font-weight: 500
-    &:before
-      content: "#"
-      margin-left: -2px
-      margin-right: 2px
-      opacity: .4
-    &:hover
-      &:before
-        color var(--theme)
-        opacity: 1
-      color: var(--text)
-      background: var(--block-border)
+    tag-chip()
 
 @media screen and (min-width: $device-mobile)
   .post-list.author #archive

package/source/css/_components/pages/article-story.styl

@@ -51,9 +51,9 @@
       vertical-align: middle
     &:before
       margin-left: -1em
-      svg-mask-icon($iH3Left)
+      svg-mask-icon(var(--icon-h3-left))
     &:after
-      svg-mask-icon($iH3Right)
+      svg-mask-icon(var(--icon-h3-right))
 
   h4:not([class])
     position: relative
@@ -115,10 +115,10 @@
     trans1 all
   &:before
     left: -0.3em
-    svg-mask-icon($iQuoteLeft)
+    svg-mask-icon(var(--icon-quote-left))
   &:after
     right: -0.3em
-    svg-mask-icon($iQuoteRight)
+    svg-mask-icon(var(--icon-quote-right))
   p:not([class])
     color: var(--text-p2)
     font-size: $fs-body

package/source/css/_components/partial/article-tags.styl

@@ -0,0 +1,10 @@
+// 文章页标签行（layout: post，渲染于 article-footer 之前）
+.article-tags
+  display: flex
+  flex-wrap: wrap
+  justify-content: center
+  align-items: center
+  margin: 2rem -0.5rem 0
+  line-height: 1.6
+  a.tag
+    tag-chip()

package/source/css/_components/partial/bread-nav.styl

@@ -16,6 +16,8 @@
       margin-left: auto
       white-space: nowrap
       opacity: .8
+    .ai-label.right
+      margin-left: auto
   a
     color: var(--text-banner)
     padding: 4px
@@ -39,6 +41,18 @@
     div#post-meta span.updated
       visibility: visible
 
+// 文章 AI 成分标签：彩色文字、无背景，颜色由内联 style 提供（banner 含图片时继承默认色）
+.ai-label
+  display: inline-flex
+  align-items: center
+  gap: 4px
+  padding: 4px
+  white-space: nowrap
+  svg
+    height: 1em
+    width: auto
+    transform: scale(1.25)
+
 .bread-nav .ghrepo
   font-size: $fs-13
   display: flex

package/source/css/_components/partial/navbar.styl

@@ -7,11 +7,19 @@
 .navbar-blur 
   margin: 0 1rem
   position: relative
-  bar-glass()
+  border-radius: $border-bar-container
+  corner-shape: $corner-shape
+  trans1: all
+  // 未吸顶：卡片样式（var(--card) 底色 + 文章卡片同款阴影），与文章卡片一致
+  background: var(--card)
+  box-shadow: $boxshadow-card
+  // 吸顶后恢复玻璃效果（bar-glass()），与之前行为一致
+  &.pinned
+    bar-glass()
+    background: transparent
 
 .navbar-container 
   max-width: 100%
-  margin: 1px
   border-radius: $border-bar-container
   overflow: scroll visible
   scrollbar(0, 0)

package/source/css/_components/sidebar/search.styl

@@ -124,18 +124,38 @@
       border-radius: $border-card-s
       trans1 background
       &:hover
-        background: var(--bg-a100)
+        background: var(--bg-a50)
     li+li
       margin-top: 8px
     .search-result-title
+      display: block
+      overflow: hidden
+      color: var(--text-p1)
+      font-size: $fs-14
+      padding: 0.5rem 1rem
+      white-space: nowrap
+      text-overflow: ellipsis
+
+    .search-result-section
+      display: block
+      overflow: hidden
       color: var(--text-p1)
       font-weight: 700
       font-size: $fs-15
+      text-overflow: ellipsis
+      white-space: nowrap
+      border-bottom: 1px solid var(--block-border)
+      padding-bottom: .5rem
+      margin-bottom: .5rem
+      &:before
+        content: '>'
+        margin-right: .5em
+        color: var(--theme)
 
     .search-result-content
       overflow: hidden
       color: var(--text-p3)
-      margin: 4px 0 0
+      margin: 0
       max-height: 13em
       text-align: justify
       font-size: $fs-13
@@ -145,8 +165,8 @@
       -webkit-line-clamp: 2
 
     .search-keyword
-      color: $c-red
-      border-bottom: 1px dashed $c-red
+      color: $c-yellow
+      border-bottom: 1px dashed $c-yellow
       font-weight: bold
       filter grayscale(25%)
 

package/source/css/_components/tag-plugins/table.styl

@@ -1,8 +1,19 @@
 // 表格标签（#466）：{% table style:scroll|wrap|compact %}
 .tag-plugin.table
   table
-    border-collapse: collapse
+    display: table
+    border-collapse: separate
+    border-spacing: 0
     width: 100%
+    border: 1px solid var(--block-border)
+    border-radius: $border-card
+    overflow: hidden
+    th
+      border-top: none
+    th, td
+      border-left: 1px solid var(--block-border)
+      &:first-child
+        border-left: none
   &.table-scroll
     overflow-x: auto
     -webkit-overflow-scrolling: touch
@@ -14,24 +25,18 @@
   &.table-wrap
     table
       table-layout: fixed
-      border-collapse: separate
-      border-spacing: 0
-      border: 1px solid var(--block-border)
-      border-radius: $border-card
-      overflow: hidden
       tr
         white-space: normal
-      th
-        border-top: none
       th, td
         word-break: break-word
         overflow-wrap: anywhere
         padding: 8px 1em
-        border-left: 1px solid var(--block-border)
-        &:first-child
-          border-left: none
   &.table-compact
+    overflow-x: auto
+    -webkit-overflow-scrolling: touch
+    scrollbar()
     table
+      min-width: max-content
       th, td
         padding: 4px 1em
         line-height: 1.4

package/source/css/_components/widgets/components.styl

@@ -48,6 +48,12 @@
   filter: grayscale(100%) brightness(0.8) opacity(0.8)
   trans1 filter
   flex-shrink: 0
+.linklist .link .active-dot
+  flex-shrink: 0
+  width: 8px
+  height: 8px
+  border-radius: 50%
+  background: x-theme-gradient()
 
 .widget-body .linklist.left
   grid-gap: 2px

package/source/css/_components/widgets/list.styl

@@ -25,6 +25,12 @@
       &.active-icon
         width: 1rem
         height: 1rem
+    .active-dot
+      flex-shrink: 0
+      width: 8px
+      height: 8px
+      border-radius: 50%
+      background: x-theme-gradient()
 
 .l_left .widget-wrapper.post-list .widget-body a
   &:hover, &.active

package/source/css/_components/widgets/toc.styl

@@ -142,7 +142,7 @@
     grid-template-rows: 0fr
 
 // 操作按钮（回到顶部 / 参与讨论）
-.widget-wrapper.toc .widget-body+.widget-footer:before 
+.widget-wrapper.toc .widget-footer:before
   content: ''
   position absolute
   background: var(--block-border)

package/source/css/_custom.styl

@@ -42,22 +42,11 @@ $c-link = convert(hexo-config('style.color.link'))
 
 $c-base-hue = 210deg // 背景/文本颜色的主基调（一般看不出来不需要修改）
 
-// icons
-
-$iQuoteLeft = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M3.691 6.292C5.094 4.771 7.217 4 10 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 6.925 10H10a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2H3a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789M20 20h-6a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789C16.094 4.771 18.217 4 21 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 17.925 10H21a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2'/%3E%3C/svg%3E"
-$iQuoteRight = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M20.309 17.708C22.196 15.66 22.006 13.03 22 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292m-11.007 0C11.19 15.66 10.999 13.03 10.993 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292'/%3E%3C/svg%3E"
-
-$iH3Left = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M13.488 4.43a.75.75 0 0 1 .081 1.058L7.988 12l5.581 6.512a.75.75 0 1 1-1.138.976l-6-7a.75.75 0 0 1 0-.976l6-7a.75.75 0 0 1 1.057-.081' clip-rule='evenodd'/%3E%3Cpath fill='currentColor' d='M17.75 5a.75.75 0 0 0-1.32-.488l-6 7a.75.75 0 0 0 0 .976l6 7A.75.75 0 0 0 17.75 19z'/%3E%3C/svg%3E"
-$iH3Right = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M10.512 4.43a.75.75 0 0 0-.081 1.058L16.012 12l-5.581 6.512a.75.75 0 1 0 1.138.976l6-7a.75.75 0 0 0 0-.976l-6-7a.75.75 0 0 0-1.057-.081' clip-rule='evenodd'/%3E%3Cpath fill='currentColor' d='M6.25 5a.75.75 0 0 1 1.32-.488l6 7a.75.75 0 0 1 0 .976l-6 7A.75.75 0 0 1 6.25 19z'/%3E%3C/svg%3E"
-
-$iLoadingIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231cd0fd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath stroke-dasharray='16' stroke-dashoffset='16' d='M12 3c4.97 0 9 4.03 9 9'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.6s' values='16;0'/%3E%3CanimateTransform attributeName='transform' dur='3s' repeatCount='indefinite' type='rotate' values='0 12 12;360 12 12'/%3E%3C/path%3E%3Cpath stroke-dasharray='64' stroke-dashoffset='64' stroke-opacity='0.3' d='M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='2.4s' values='64;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E"
-
-
 $border-card-l = convert(hexo-config('style.border-radius.card-l'))
 $border-card = convert(hexo-config('style.border-radius.card'))
 $border-card-s = convert(hexo-config('style.border-radius.card-s'))
 $border-bar = convert(hexo-config('style.border-radius.bar'))
-$bar-item-gap = 2px // bar 容器内按钮/标签之间的间距与距边距离（gap + padding 共用）
+$bar-item-gap = 4px // bar 容器内按钮/标签之间的间距与距边距离（gap + padding 共用）
 $border-bar-container = 'calc(%s + %s)' % ($border-bar $bar-item-gap) // bar 容器圆角 = 按钮圆角（$border-bar）+ 间距，保持同心
 $border-image-l = convert(hexo-config('style.border-radius.image-l'))
 $border-image = convert(hexo-config('style.border-radius.image'))

package/source/css/_defines/func.styl

@@ -1,9 +1,9 @@
-svg-mask-icon($svg)
-  -webkit-mask-image: url($svg)
+svg-mask-icon($img)
+  -webkit-mask-image: $img
   -webkit-mask-repeat: no-repeat
   -webkit-mask-position: center
   -webkit-mask-size: contain
-  mask-image: url($svg)
+  mask-image: $img
   mask-repeat: no-repeat
   mask-position: center
   mask-size: contain
@@ -109,6 +109,31 @@ hover-block($v, $h, $br = 4px)
   &:hover
     background: var(--block-border)
 
+// 标签胶囊（标签页 /blog/tags/ 与文章底部标签复用；间距由容器负边距抵消）
+tag-chip()
+  display: inline-flex
+  align-items: center
+  position: relative
+  color: var(--text-p2)
+  margin: .5rem
+  padding: .5em .75rem
+  border-radius: 999px
+  background: var(--block)
+  font-size: $fs-13
+  font-weight: 500
+  trans1 all
+  svg
+    width: 1em
+    height: 1em
+    margin-right: .25em
+    opacity: .4
+  &:hover
+    color: var(--text)
+    background: var(--block-border)
+    svg
+      color: var(--theme)
+      opacity: 1
+
 floatable-trans()
   trans2 transform box-shadow
 floatable-float()

package/source/css/_plugins/index.styl

@@ -2,29 +2,11 @@
 @import 'aplayer'
 
 // 根据主题配置加载
-if hexo-config('plugins.swiper.enable')
-  @import 'swiper'
 if hexo-config('plugins.scrollreveal.enable')
   @import 'scrollreveal'
-if hexo-config('plugins.fancybox.enable')
-  @import 'fancybox'
-if hexo-config('plugins.mermaid.style_optimization')
-  @import 'mermaid'
 if hexo-config('plugins.copycode.enable')
   @import 'copycode'
 if hexo-config('plugins.tianli_gpt.enable')
   @import 'tianli_gpt'
 if hexo-config('plugins.katex.enable')
   @import 'katex'
-
-// 评论
-if hexo-config('comments.service') == 'beaudar' or index(hexo-config('comments.custom_css'), 'beaudar') >= 0
-  @import 'comments/beaudar'
-if hexo-config('comments.service') == 'twikoo' or index(hexo-config('comments.custom_css'), 'twikoo') >= 0
-  @import 'comments/twikoo'
-if hexo-config('comments.service') == 'utterances' or index(hexo-config('comments.custom_css'), 'utterances') >= 0
-  @import 'comments/utterances'
-if hexo-config('comments.service') == 'waline' or index(hexo-config('comments.custom_css'), 'waline') >= 0
-  @import 'comments/waline'
-if hexo-config('comments.service') == 'artalk' or index(hexo-config('comments.custom_css'), 'artalk') >= 0
-  @import 'comments/artalk'

package/source/css/{_plugins/comments → comments}/artalk.styl

@@ -1,3 +1,7 @@
+@import '../_defines/const'
+@import '../_custom'
+@import '../_defines/func'
+
 .cmt-body.artalk .artalk
   margin-top: 1rem
   .atk-editor-plug-preview

package/source/css/{_plugins/comments → comments}/twikoo.styl

@@ -1,3 +1,7 @@
+@import '../_defines/const'
+@import '../_custom'
+@import '../_defines/func'
+
 .cmt-body.twikoo
   --twikoo-theme: var(--theme)
   margin-top: 1.5rem

package/source/css/{_plugins → plugins}/mermaid.styl

@@ -1,3 +1,6 @@
+@import '../_defines/const'
+@import '../_custom'
+
 pre.mermaid
   display: flex;
   align-items: center;

package/source/css/{_plugins → plugins}/swiper.styl

@@ -1,3 +1,7 @@
+@import '../_defines/const'
+@import '../_custom'
+@import '../_defines/func'
+
 :root
   --swiper-theme-color: var(--theme) !important
 .swiper
@@ -53,4 +57,4 @@ div.swiper-slide
   transform: translateX(-1px)
 
 .swiper-button-next:after
-  transform: translateX(1px)
+  transform: translateX(1px)

package/source/js/icons.js

@@ -0,0 +1,60 @@
+/**
+ * icons.js | 非首屏图标异步加载
+ *
+ * 服务端 icon() 对非首屏 SVG 图标输出 <svg class="icon" data-icon="ns:key"> 占位符，
+ * 本脚本按命名空间拉取构建期生成的 js/icons/{ns}.json，成功后原位替换为完整内联 SVG，
+ * 最终 DOM 与全量内联一致，现有 CSS 钩子（搜索三态、菜单渐变、chat 着色等）不受影响。
+ * 首屏关键图标（搜索、菜单、leftbar/rightbar、goback）由模板内联，不经过本脚本。
+ */
+(function () {
+  'use strict';
+
+  const nodes = Array.prototype.slice.call(document.querySelectorAll('svg.icon[data-icon]'));
+  if (nodes.length === 0) {
+    return;
+  }
+
+  const groups = {};
+  nodes.forEach((node) => {
+    const key = node.getAttribute('data-icon');
+    const idx = key.indexOf(':');
+    if (idx < 1) {
+      return;
+    }
+    const ns = key.slice(0, idx);
+    if (!groups[ns]) {
+      groups[ns] = [];
+    }
+    groups[ns].push(node);
+  });
+
+  const script = document.currentScript;
+  const version = (script && script.getAttribute('data-version')) || '';
+  const root = (typeof ctx !== 'undefined' && ctx.root) || '/';
+
+  Object.keys(groups).forEach((ns) => {
+    const url = root + 'js/icons/' + ns + '.json' + (version ? '?v=' + version : '');
+    fetch(url)
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error('HTTP ' + res.status);
+        }
+        return res.json();
+      })
+      .then((data) => {
+        const set = data && data[ns];
+        groups[ns].forEach((node) => {
+          const key = node.getAttribute('data-icon');
+          const svg = set && set[key];
+          if (typeof svg === 'string' && svg.length > 0) {
+            node.outerHTML = svg;
+          } else {
+            console.warn('[stellar] icon not found: ' + key);
+          }
+        });
+      })
+      .catch((err) => {
+        console.warn('[stellar] icons load failed: ' + ns, err);
+      });
+  });
+})();