hexo-theme-stellar 1.42.0 → 1.43.0

package/scripts/tags/lib/gallery.js

@@ -17,14 +17,14 @@
 
 var index = 0
 
-function img(src, alt, loading) {
+function img(src, alt) {
   let img = ''
   img += `<img class="lazy" data-fancybox="gallery-${index}" data-src="${src}"`
   if (alt?.length > 0) {
     img += ` alt="${alt}"`
   }
   img += `/>`
-  img += `<div class="lazy-icon" style="background-image:url(${loading});"></div>`
+  img += `<div class="lazy-icon"></div>`
   // cap
   img += `<div class="image-meta">`
   if (alt?.length > 0) {
@@ -55,7 +55,7 @@ module.exports = ctx => function(args, content) {
     if (matches?.length > 2) {
       let alt = matches[1]
       let src = matches[2]
-      el += `<div class="${layoutType}-cell lazy-box">${img(src, alt, ctx.theme.config.default.loading || ctx.utils.iconData('default:loading-placeholder'))}</div>`
+      el += `<div class="${layoutType}-cell lazy-box">${img(src, alt)}</div>`
     }
   }
   el += `</div>`

package/scripts/tags/lib/image.js

@@ -50,7 +50,7 @@ module.exports = ctx => function(args) {
     img += `onerror="this.src="${ctx.theme.config.default.image_onerror || ctx.utils.iconData('image:onerror')}""`
     img += '/>'
     // loading
-    img += `<div class="lazy-icon" style="background-image:url(${ctx.theme.config.default.loading || ctx.utils.iconData('default:loading-placeholder')});"></div>`
+    img += `<div class="lazy-icon"></div>`
     if (fancyboxHref) {
       a += ` href="${fancyboxHref}">${img}</a>`
       return a

package/scripts/tags/lib/posters.js

@@ -32,7 +32,7 @@ module.exports = ctx => function(args) {
         el += `<div class="grid-cell poster-card">`
         el += `<a class="card-link lazy-box" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
         el += `<img class="lazy" data-src="${item.cover || item.icon || item.avatar || ctx.theme.config.default.cover}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
-        el += `<div class="lazy-icon" style="background-image:url(${ctx.theme.config.default.loading || ctx.utils.iconData('default:loading-placeholder')});"></div>`
+        el += `<div class="lazy-icon"></div>`
         el += `<div class="image-meta">`
         if (item.title) {
           el += `<span class="image-caption">${item.title}</span>`

package/scripts/tags/lib/sites.js

@@ -10,6 +10,7 @@
 module.exports = ctx => function(args) {
   args = ctx.args.map(args, ['repo', 'api'], ['group'])
   const host = ctx.theme.config.api_host.ghraw
+  const siteinfoApi = ctx.theme.config.data_services.siteinfo?.api
   var api
   if (args.api) {
     api = args.api
@@ -29,16 +30,19 @@ module.exports = ctx => function(args) {
     el += '<div class="grid-box">'
     for (let item of (links[args.group] || [])) {
       if (item?.url && item?.title) {
+        const itemSiteinfoApi = !item.icon && !item.avatar && siteinfoApi
+          ? siteinfoApi.replace('{href}', item.url)
+          : ''
         el += `<div class="grid-cell site-card">`
-        el += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
+        el += `<a class="card-link"${itemSiteinfoApi ? ` data-siteinfo-api="${itemSiteinfoApi}"` : ''} target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
         el += `<div class="lazy-box snapshot">`
         el += `<img class="lazy" data-src="${item.cover || item.snapshot || item.screenshot || ('https://image.thum.io/get/width/1280/crop/720/' + item.url)}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
-        el += `<div class="lazy-icon" style="background-image:url(&quot;${ctx.theme.config.default.loading || ctx.utils.iconData('default:loading-placeholder')}&quot;);"></div>`
+        el += `<div class="lazy-icon"></div>`
         el += `</div>`
         el += `<div class="info">`
         el += `<div class="lazy-box icon">`
-        el += `<img class="lazy" data-src="${item.icon || item.avatar || ctx.theme.config.default.link}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${item.icon || item.avatar || ctx.theme.config.default.link}&quot;;"/>`
-        el += `<div class="lazy-icon" style="background-image:url(&quot;${ctx.theme.config.default.loading || ctx.utils.iconData('default:loading-placeholder')}&quot;);"></div>`
+        el += `<img class="lazy siteinfo-icon" data-src="${item.icon || item.avatar || ctx.theme.config.default.link}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${item.icon || item.avatar || ctx.theme.config.default.link}&quot;;"/>`
+        el += `<div class="lazy-icon"></div>`
         el += `</div>`
         el += `<span class="title">${item.title}</span>`
         el += `<span class="desc">${item.description || item.url}</span>`

package/source/css/_common/base.styl

@@ -24,11 +24,11 @@ img
   max-width: 100%
 
 li
-  font-size: 'calc(%s - 1px)' % var(--fsp)
+  font-size: 'calc(%s - 1px)' % var(--fs-content)
 
 
 ul,ol
-  padding-left: var(--fsp)
+  padding-left: var(--fs-content)
 
 
 // table
@@ -40,8 +40,8 @@ table:not([class])
   margin: 1rem 0
   max-width: 100%
   vertical-align: text-top
-  --fsp: $fsp2
-  font-size: var(--fsp)
+  --fs-content: $fs-content-2
+  font-size: var(--fs-content)
   scrollbar(0,0)
   th
     background: var(--block)

package/source/css/_common/blockquote.styl

@@ -2,7 +2,7 @@ blockquote
   display: block
   margin-left: 0
   margin-right: 0
-  padding: 0 var(--fsp)
+  padding: 0 var(--fs-content)
   $bd-left = 4px
   color: var(--text-p3)
   position: relative
@@ -18,4 +18,4 @@ blockquote
     opacity: 0.5
     background: var(--text-meta)
   &:hover:before
-    background: var(--theme)
+    background: var(--theme)

package/source/css/_common/dropdown.styl

@@ -0,0 +1,132 @@
+.dropdown
+  position: relative
+  display: inline-block
+  z-index: 0
+  overflow: visible
+  line-height: 1
+  font-size: $fs-14
+  >.dropdown-trigger
+    display: inline-flex
+    align-items: center
+    gap: 0.5rem
+    box-sizing: border-box
+    min-height: 2rem
+    padding: 0.5rem 0.75rem
+    cursor: pointer
+    list-style: none
+    outline: none
+    border-radius: $border-bar
+    color: var(--text-p2)
+    background: var(--block)
+    text-decoration: none
+    white-space: nowrap
+    &::-webkit-details-marker
+      display: none
+    &::marker
+      display: none
+    &:hover, &:focus-visible
+      color: var(--text-p1)
+      background: var(--block-border)
+    >svg, >img, >.icon
+      flex: 0 0 1.25rem
+      width: 1.25rem
+      height: 1.25rem
+    >.dropdown-arrow
+      transition: transform 0.2s ease
+    >span
+      overflow: hidden
+      text-overflow: ellipsis
+  &[open]
+    z-index: 10
+    >.dropdown-trigger
+      color: var(--text-p1)
+      background: var(--block-border)
+      >.dropdown-arrow
+        transform: rotate(180deg)
+.dropdown-menu
+  display: flex
+  flex-direction: column
+  gap: 0.125rem
+  box-sizing: border-box
+  max-width: calc(100vw - 2rem)
+  max-height: calc(100vh - 2rem)
+  padding: 0.25rem
+  overflow-x: hidden
+  overflow-y: auto
+  font-size: $fs-14
+  border: 1px solid var(--block-border)
+  border-radius: $border-card
+  corner-shape: $corner-shape
+  background: rgba(white, 0.3)
+  box-shadow: 0 0 2px rgba(black, .04), 0 2px 8px rgba(black, .04), 0 4px 16px rgba(black, .04)
+  backdrop-filter: saturate(300%) blur(16px)
+  -webkit-backdrop-filter: saturate(300%) blur(16px)
+  :root[data-theme="dark"] &
+    background: rgba(white, 0.2)
+  :root:not([data-theme]) &
+    @media (prefers-color-scheme: dark)
+      background: rgba(white, 0.2)
+  text-align: left
+  line-height: 1
+
+.dropdown-menu.ui-collection[data-density='compact']
+  min-width: 150px
+  --ui-item-min-height: calc(1.5rem + 2 * var(--ui-item-padding-y))
+
+.dropdown > .dropdown-menu
+  position: absolute
+  z-index: 10
+  top: calc(100% + 0.5rem)
+  left: 50%
+  transform: translateX(-50%)
+  visibility: hidden
+
+.dropdown[direction=up] > .dropdown-menu
+  top: auto
+  bottom: calc(100% + 0.5rem)
+
+.dropdown[align=left] > .dropdown-menu
+  left: 0
+  transform: none
+
+.dropdown[align=right] > .dropdown-menu
+  right: 0
+  left: auto
+  transform: none
+
+.dropdown-layer
+  position: fixed
+  z-index: 1000
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+  pointer-events: none
+  > .dropdown-bridge
+    position: fixed
+    z-index: 0
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    pointer-events: auto
+    background: transparent
+  > .dropdown-menu
+    position: fixed
+    z-index: 1000
+    top: 0
+    left: 0
+    transform: none
+    pointer-events: auto
+    visibility: hidden
+    opacity: 0
+    contain: paint
+    will-change: opacity
+    transition: opacity 0.16s ease-out
+    &.dropdown-menu-visible
+      visibility: visible
+      opacity: 1
+
+@media (prefers-reduced-motion: reduce)
+  .dropdown-layer > .dropdown-menu, .dropdown > .dropdown-trigger > .dropdown-arrow
+    transition: none

package/source/css/_common/html.styl

@@ -7,7 +7,7 @@ html
   scrollbar(8px,8px)
   overflow-y: scroll
   font-family: $ff-body
-  font-size: $fs-root
+  font-size: var(--fs-root)
   -webkit-text-size-adjust: 100%
   -ms-text-size-adjust: 100%
   scroll-padding-top: 0

package/source/css/_common/loading.styl

@@ -22,8 +22,11 @@ svg.loading
   border-radius: $border-card
   position relative
   padding: 2rem
-  svg  
+  svg,
+  .lazy-icon
     margin: 4px
+  .lazy-icon
+    display: inline-block
   &:after 
     content: hexo-config('style.loading.loading')
     color: var(--text-p1)
@@ -35,4 +38,4 @@ svg.loading
 
 .article-footer
   .loading-wrap
-    background: none
+    background: none

package/source/css/_common/title.styl

@@ -11,9 +11,9 @@ h3,.h3
 h4,.h4
   font-size: var(--fsh4)
 h5
-  font-size: 'calc(%s + 1px)' % var(--fsp)
+  font-size: 'calc(%s + 1px)' % var(--fs-content)
 h6
-  font-size: 'calc(%s + 0px)' % var(--fsp)
+  font-size: 'calc(%s + 0px)' % var(--fs-content)
 
 // story 文章段落标题（h2）：居中 + 两侧 accent 斜杠装饰
 // 专栏列表页专栏标题（.topic-title）与 story 文章 h2 共用
@@ -34,15 +34,15 @@ story-title()
 
 // 次级段落字号
 .fs15
-  --fsp: $fs-15
-  font-size: var(--fsp)
+  --fs-content: $fs-15
+  font-size: var(--fs-content)
 .fs14
-  --fsp: $fs-14
-  font-size: var(--fsp)
+  --fs-content: $fs-14
+  font-size: var(--fs-content)
 
 .footnote
-  --fsp: $fs-13
-  font-size: var(--fsp)
+  --fs-content: $fs-13
+  font-size: var(--fs-content)
 
 .widgets
   .post-title

package/source/css/_components/collection.styl

@@ -0,0 +1,188 @@
+// 可移植的紧凑列表/网格只读取 surface 语义变量，不感知所在页面区域。
+[data-ui-surface]
+  --ui-item-bg: transparent
+  --ui-item-bg-hover: var(--block)
+  --ui-item-bg-active: var(--block)
+  --ui-item-shadow-hover: none
+  --ui-item-shadow-active: none
+  --ui-item-title: var(--text-p1)
+  --ui-item-muted: var(--text-p3)
+  --ui-item-padding-x: var(--gap-base)
+  --ui-item-padding-y: 8px
+  --ui-item-min-height: 32px
+  --ui-collection-gap: 4px
+
+[data-ui-surface='glass']
+  --ui-item-bg-hover: linear-gradient(180deg, rgba(white, .38), rgba(white, 0) 50%), var(--bg-a50)
+  --ui-item-bg-active: linear-gradient(180deg, rgba(white, .38), rgba(white, 0) 50%), var(--bg-a50)
+  --ui-item-shadow-hover: inset 0 1px 0 rgba(white, .45)
+  --ui-item-shadow-active: inset 0 1px 0 rgba(white, .45)
+  :root[data-theme='dark'] &
+    --ui-item-bg-hover: linear-gradient(180deg, rgba(white, .08), rgba(white, 0) 50%), var(--bg-a20)
+    --ui-item-bg-active: linear-gradient(180deg, rgba(white, .08), rgba(white, 0) 50%), var(--bg-a20)
+    --ui-item-shadow-hover: inset 0 1px 0 rgba(white, .08)
+    --ui-item-shadow-active: inset 0 1px 0 rgba(white, .08)
+  :root:not([data-theme]) &
+    @media screen and (prefers-color-scheme: dark)
+      --ui-item-bg-hover: linear-gradient(180deg, rgba(white, .08), rgba(white, 0) 50%), var(--bg-a20)
+      --ui-item-bg-active: linear-gradient(180deg, rgba(white, .08), rgba(white, 0) 50%), var(--bg-a20)
+      --ui-item-shadow-hover: inset 0 1px 0 rgba(white, .08)
+      --ui-item-shadow-active: inset 0 1px 0 rgba(white, .08)
+
+.ui-collection
+  --ui-columns: 1
+  --ui-grid-min: 7rem
+  --ui-item-depth: 0
+  display: grid
+  gap: var(--ui-collection-gap)
+  min-width: 0
+
+.ui-collection[data-layout='list']
+  grid-template-columns: minmax(0, 1fr)
+
+.ui-collection[data-layout='grid']
+  grid-template-columns: unquote('repeat(auto-fit, minmax(min(100%, max(var(--ui-grid-min), calc((100% - (var(--ui-columns) - 1) * var(--ui-collection-gap)) / var(--ui-columns)))), 1fr))')
+
+.ui-collection[data-density='compact']
+  --ui-item-padding-y: 4px
+  --ui-item-min-height: 30px
+  --ui-collection-gap: 2px
+
+.ui-collection__item
+  --item-theme-light: x-theme-light()
+  box-sizing: border-box
+  min-width: 0
+  min-height: var(--ui-item-min-height)
+  padding: var(--ui-item-padding-y) var(--ui-item-padding-x)
+  padding-left: calc(var(--ui-item-padding-x) + var(--ui-item-depth) * var(--gap-base))
+  border-radius: $border-bar
+  color: var(--text-p2)
+  background: var(--ui-item-bg)
+  box-shadow: none
+  display: flex
+  align-items: center
+  gap: 12px
+  line-height: 1.2
+  position: relative
+  &:hover
+    color: var(--ui-item-title)
+    background: var(--ui-item-bg-hover)
+    box-shadow: var(--ui-item-shadow-hover)
+  &.is-active
+    color: var(--ui-item-title)
+    background: var(--ui-item-bg-active)
+    box-shadow: var(--ui-item-shadow-active)
+  &:focus-visible
+    outline: 2px solid var(--theme)
+    outline-offset: 2px
+
+.ui-collection__leading
+  width: 1.5rem
+  height: 1.5rem
+  flex-shrink: 0
+  display: flex
+  align-items: center
+  justify-content: center
+  color: var(--text-p2)
+  img,svg
+    max-width: 100%
+    max-height: 100%
+    object-fit: contain
+    opacity: .5
+
+.ui-collection__content
+  min-width: 0
+  flex: 1
+  display: flex
+  flex-direction: column
+  gap: 4px
+
+.ui-collection[data-variant='nav'] .ui-collection__content
+  display: block
+  txt-ellipsis()
+  .ui-collection__prefix,
+  .ui-collection__title
+    display: inline
+
+.ui-collection__prefix
+  color: var(--text-p2)
+  font-size: $fs-12
+  font-weight: 700
+  txt-ellipsis()
+  &:after
+    content: ''
+    display: inline-block
+    width: 4px
+    height: 4px
+    margin: 0 4px 2px
+    border-radius: 50%
+    background: currentColor
+    opacity: .35
+
+.ui-collection__title
+  color: inherit
+  font-size: $fs-14
+  font-weight: 500
+  txt-ellipsis()
+
+.ui-collection__description
+  color: var(--ui-item-muted)
+  font-size: $fs-12
+  line-height: 1.4
+  display: -webkit-box
+  -webkit-box-orient: vertical
+  -webkit-line-clamp: 2
+  overflow: hidden
+
+.ui-collection__meta
+  color: var(--ui-item-muted)
+  font-size: $fs-12
+  txt-ellipsis()
+
+.ui-collection__indicator
+  flex-shrink: 0
+  width: 8px
+  height: 8px
+  border-radius: 50%
+  corner-shape: round
+  background: x-theme-gradient()
+
+.ui-collection__item:hover,
+.ui-collection__item.is-active
+  .ui-collection__leading
+    color: var(--item-theme, var(--theme))
+    img,svg
+      opacity: 1
+    svg [fill='currentColor']
+      fill: var(--item-grad, currentColor)
+    svg [stroke='currentColor']
+      stroke: var(--item-grad, currentColor)
+
+.ui-collection[data-layout='grid']
+  .ui-collection__indicator
+    display: none
+
+.ui-collection[data-variant='icon']
+  --ui-grid-min: 3rem
+  .ui-collection__item
+    justify-content: center
+    text-align: center
+    padding-left: var(--ui-item-padding-x)
+  .ui-collection__content
+    flex: initial
+
+.ui-collection[data-variant='summary'] .ui-collection__item
+  align-items: flex-start
+  border-radius: $border-card-s
+  padding-top: 8px
+  padding-bottom: 8px
+  .ui-collection__title
+    font-weight: 700
+  .ui-collection__content
+    display: flex
+
+.ui-collection-adapter
+  --ui-adapter-bg-hover: var(--ui-item-bg-hover)
+  --ui-adapter-bg-active: var(--ui-item-bg-active)
+  --ui-adapter-shadow-hover: var(--ui-item-shadow-hover)
+  --ui-adapter-shadow-active: var(--ui-item-shadow-active)

package/source/css/_components/layout.styl

@@ -3,7 +3,7 @@
   grid-template-columns: 1fr minmax(200px,var(--width-main)) 1fr
   grid-gap: calc(var(--gap-page) * 1)
   margin: auto
-  font-size: var(--fsp)
+  font-size: var(--fs-content)
 
 .l_body aside
   z-index: 8

package/source/css/_components/list.styl

@@ -104,8 +104,8 @@
     flex-wrap: wrap
     margin: 0
     line-height: 2
-    --fsp: $fsp1
-    font-size: var(--fsp)
+    --fs-content: $fs-content-1
+    font-size: var(--fs-content)
     svg
       height: 1em
       width: auto
@@ -217,46 +217,6 @@
     font-size: $fsh4
 
 
-// wiki
-.post-list .post-card.wiki article
-  display: flex
-  flex-wrap: wrap
-  trans1 box-shadow
-  justify-content: center
-  padding: 1rem .5rem
-
-
-.post-list .post-card.wiki article .preview
-  display: flex
-  margin: 1rem 3rem
-  align-items: center
-  img
-    width: 96px
-    max-height: 96px
-    object-fit: contain
-    trans1: all 0.75s
-.post-list .post-card.wiki article .excerpt
-  margin: 1rem .5rem
-  @media screen and (min-width: 950px)
-    margin-right: 2rem
-  min-width: 280px
-  flex: 1
-  overflow: hidden
-  word-wrap: break-word
-  .caps
-    line-height: 1
-    margin-bottom: 0.75rem
-  .cap
-    --theme-block: var(--block)
-    background: var(--theme-block)
-    padding: 2px 4px
-    border-radius: 4px
-  p:last-child
-    margin-bottom: 0
-  .cap+.cap
-    margin-left: 4px
-
-
 // topic 专栏列表：平铺容器 + 上下布局（h2 专栏标题 → 最新文章卡片 → 文章链接列表）
 .post-list.topic
   .post-card-wrap
@@ -287,7 +247,7 @@
       color: var(--text-p2)
       font-size: $fs-14
       line-height: 1.5
-      // 左右内边距与文章列表（.post-panel padding: 0 1rem）一致
+      // 左右内边距与下方归档式文章列表一致
       padding: 0 1rem
       margin: 0 0 1rem
     .cover
@@ -308,13 +268,51 @@
       img
         width: 100%
         height: 100%
-    .post-panel
+    .topic-posts
       flex: none
       width: 100%
+      margin: 0
       // 左右内边距与文章封面文字区（.cover-info padding: 1rem）一致
       padding: 0 1rem
-      .posts
-        margin: 0
+    .topic-posts-more[open]
+      display: flex
+      flex-direction: column
+      .topic-posts-extra
+        order: 1
+      .topic-posts-toggle
+        order: 2
+    .topic-posts-toggle
+      display: flex
+      align-items: center
+      justify-content: center
+      gap: .35em
+      width: 100%
+      margin-top: .5rem
+      padding: .75rem 0
+      list-style: none
+      cursor: pointer
+      color: var(--text-p3)
+      font-size: $fs-13
+      font-weight: 500
+      trans1 color
+      &::-webkit-details-marker
+        display: none
+      .when-open
+        display: none
+      svg
+        width: 1em
+        height: 1em
+        transform: rotate(90deg)
+        trans1 transform
+      &:hover
+        color: var(--accent)
+    .topic-posts-more[open] .topic-posts-toggle
+      .when-closed
+        display: none
+      .when-open
+        display: inline
+      svg
+        transform: rotate(-90deg)
   // hover 放大覆盖（与 photo 卡片一致，见 .post-card.post.photo:hover 注释）
   .post-card.topic:hover
     .cover:before

package/source/css/_components/md.styl

@@ -27,8 +27,8 @@
     margin: 0 .25rem
   blockquote,ul,ol
     p,ul,ol
-      --fsp: $fsp1
-      font-size: var(--fsp)
+      --fs-content: $fs-content-1
+      font-size: var(--fs-content)
       line-height: 1.5
       code 
         font-size: inherit
@@ -59,7 +59,7 @@
   margin-top: 0
 
 .md-text p
-  font-size: var(--fsp)
+  font-size: var(--fs-content)
 
 .md-text pre
   -webkit-font-smoothing: auto

package/source/css/_components/page-transition.styl

@@ -0,0 +1,22 @@
+// 同源整页导航使用浏览器原生 View Transition 平滑衔接。
+// 不支持该能力的浏览器会忽略这些规则，继续使用普通整页导航。
+if hexo-config('style.page_transition.enable')
+  @view-transition
+    navigation: auto
+
+  // 左栏独立于根快照过渡，内容未变化时避免随整页一起闪烁。
+  .l_left
+    view-transition-name: leftbar
+
+  ::view-transition-group(root),
+  ::view-transition-old(root),
+  ::view-transition-new(root),
+  ::view-transition-group(leftbar),
+  ::view-transition-old(leftbar),
+  ::view-transition-new(leftbar)
+    animation-duration: 0.2s
+    animation-timing-function: ease-out
+
+  @media (prefers-reduced-motion: reduce)
+    @view-transition
+      navigation: none