hexo-theme-stellar 1.42.1 → 1.43.0

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

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

@@ -19,24 +19,25 @@
       z-index: -1
       border-radius: 4px
       background: var(--theme)
-  a.post
-    display: inline-flex
-    align-items: baseline
-    margin: 0.25rem 0
-    color: var(--text-p1)
-    trans2 color border
-    border-bottom: 1px dashed var(--text-meta)
+
+.post-list .archive-list a.post
+  display: inline-flex
+  align-items: baseline
+  margin: 0.25rem 0
+  color: var(--text-p1)
+  trans2 color border
+  border-bottom: 1px dashed var(--text-meta)
+  time
+    font-family: $ff-code
+    margin-right: 1em
+    font-weight: 700
+    flex-shrink: 0
+    color: var(--text-p4)
+  &:hover
+    border-bottom: 1px solid var(--theme)
+    color: var(--text)
     time
-      font-family: $ff-code
-      margin-right: 1em
-      font-weight: 700
-      flex-shrink: 0
-      color: var(--text-p4)
-    &:hover
-      border-bottom: 1px solid var(--theme)
-      color: var(--text)
-      time
-        color: var(--theme)
+      color: var(--theme)
 
 
 
@@ -52,7 +53,7 @@
     align-items: center
     justify-content: space-between
     font-weight: 500
-    font-size: $fsp2
+    font-size: $fs-content-2
     span
       display: flex
       align-items: center

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

@@ -1,6 +1,6 @@
 .l_body[text-indent] article.content
   p:not([class])
-    text-indent: 'calc(%s * 2)' % var(--fsp)
+    text-indent: 'calc(%s * 2)' % var(--fs-content)
     text-align: justify
     a
-      text-indent: 0
+      text-indent: 0

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

@@ -1,5 +1,9 @@
 .l_body[type=story] .md-text.content
-  --fsp: 'calc(%s + 1px)' % $fs-body
+  --fs-content-base: 'calc(%s + 2px)' % var(--fs-root)
+  --fs-content: var(--fs-content-base)
+  --fsh2: 'calc(%s + 11px)' % var(--fs-content)
+  --fsh3: 'calc(%s + 7px)' % var(--fs-content)
+  --fsh4: 'calc(%s + 4px)' % var(--fs-content)
   --gap-p: 2rem
   >div.tag-plugin,>p>img
     margin-top: 2.4rem
@@ -67,7 +71,7 @@
       background: x-theme-alpha(1)
 
   ol,ul
-    margin-left: 'calc(%s * 2)' % var(--fsp)
+    margin-left: 'calc(%s * 2)' % var(--fs-content)
   h1,h2,h3,h4,h5,h6
     text-align: center
     margin: 2em 0 1.5em
@@ -88,7 +92,7 @@
 
 .l_body[type=story] .md-text.content>blockquote, .md-text.content .tag-plugin.blockquote
   text-align: center
-  --inset: calc(var(--fsp) * 2)
+  --inset: calc(var(--fs-content) * 2)
   margin-left: var(--inset)
   margin-right: var(--inset)
   background: var(--block)
@@ -112,7 +116,7 @@
     svg-mask-icon(var(--icon-quote-right))
   p:not([class])
     color: var(--text-p2)
-    font-size: $fs-body
+    font-size: var(--fs-content)
     text-indent: 2em
   &:hover
     &:before,&:after
@@ -124,6 +128,6 @@
 
 
 .l_body[text-indent] .tag-plugin.tabs .tab-content .tab-pane>p:not([class])
-  text-indent: 'calc(%s * 2)' % var(--fsp)
+  text-indent: 'calc(%s * 2)' % var(--fs-content)
   a
     text-indent: 0

package/source/css/_components/pages/collection-preview.styl

@@ -0,0 +1,68 @@
+.collection-preview
+  padding: 2rem 1rem
+  >h1, >p
+    max-width: 720px
+    margin-left: auto
+    margin-right: auto
+
+.collection-preview__grid
+  display: grid
+  grid-template-columns: repeat(2, minmax(0, 1fr))
+  gap: var(--gap-page)
+  align-items: start
+  margin-top: 2rem
+  @media screen and (max-width: $device-tablet)
+    grid-template-columns: minmax(0, 1fr)
+
+.collection-preview__theme
+  max-width: 720px
+  margin: 1rem auto 0
+  display: flex
+  align-items: center
+  justify-content: flex-end
+  gap: 8px
+  color: var(--text-p3)
+  font-size: $fs-12
+  button
+    border: 0
+    border-radius: $border-button
+    padding: 4px 8px
+    color: var(--text-p2)
+    background: var(--block)
+    cursor: pointer
+    &:focus-visible
+      outline: 2px solid var(--theme)
+      outline-offset: 2px
+
+.collection-preview__surface
+  box-sizing: border-box
+  width: 100%
+  margin: 0 auto
+  padding: var(--gap-base)
+  border-radius: $border-card-l
+  background: var(--card)
+  box-shadow: $boxshadow-card
+  &[data-preview-width='240']
+    max-width: 240px
+  &[data-preview-width='320']
+    max-width: 320px
+  &[data-preview-width='720']
+    width: unquote('min(720px, calc(100vw - 2 * var(--gap-page)))')
+    max-width: none
+    grid-column: 1 / -1
+  &[data-ui-surface='glass']
+    background: linear-gradient(135deg, rgba(white, .42), rgba(white, .12)), url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.13/image/sidebar-bg1@small.jpg) center / cover
+  >header
+    display: flex
+    justify-content: space-between
+    gap: 8px
+    color: var(--text-p1)
+    padding: 0 var(--gap-base) var(--gap-base)
+    code
+      color: var(--text-p3)
+      background: none
+      padding: 0
+  .widget-wrapper
+    margin-top: 0
+  .widget-wrapper+.widget-wrapper
+    margin-top: 24px

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

@@ -33,16 +33,18 @@
     margin-right: 2px
     opacity: .4
 
-.widget-body.tag-tree .tag-subtree > a > .tag-switcher-wrapper
+.tag-tree .tag-subtree > .tag-tree__link > .tag-switcher-wrapper
   width: 1.75rem
   height: 0.875rem
+  flex-shrink: 0
+  margin-left: auto
   display: flex
   justify-content: end
   align-items: center
   &:hover
     color: var(--theme)
 
-.widget-body.tag-tree .tag-subtree.parent-tag > a .tag-switcher
+.tag-tree .tag-subtree.is-parent > .tag-tree__link .tag-switcher
   display: inline-block
   height: 0.5rem
   width: 0.5rem
@@ -50,16 +52,16 @@
   border-style: none solid solid none
   transform: translateX(-25%) rotate(-45deg)
 
-.widget-body.tag-tree .tag-subtree.parent-tag.expanded > a .tag-switcher
+.tag-tree .tag-subtree.is-parent.is-expanded > .tag-tree__link .tag-switcher
   transform: translateY(-25%) rotate(45deg)
 
-.widget-body.tag-tree .tag-subtree.parent-tag > .tag-subtree
+.tag-tree .tag-subtree.is-parent > .tag-subtree
   display: none
 
-.widget-body.tag-tree .tag-subtree.parent-tag.expanded > .tag-subtree
+.tag-tree .tag-subtree.is-parent.is-expanded > .tag-subtree
   display: block
 
-.widget-body.tag-tree .tag-subtree .tagcon
-  font-size: smaller
-  opacity: 0.4
-  margin-right: 0.25rem
+.tag-tree .tag-subtree
+  min-width: 0
+  >.ui-collection__item
+    width: 100%

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

@@ -13,7 +13,7 @@
     font-weight: 500
     font-size: $fsh5
   .body
-    --fsp: $fsp2
+    --fs-content: $fs-content-2
     >.link
       margin: 0
       height: 0
@@ -28,13 +28,13 @@
       overflow: hidden
       padding-left: 1rem
       li
-        font-size: var(--fsp)
+        font-size: var(--fs-content)
     .post-title
       margin: 0
       line-height: 1.2
       word-break: break-all
       p
-        --fsp: $fsp2
+        --fs-content: $fs-content-2
   section+section
     margin-top: 1rem
     padding-top: 1rem
@@ -91,11 +91,14 @@
 .article-footer .social-wrap
   grid-gap: 0.5rem 2rem
   margin: 1rem 0 0.5rem
-  grid-template-columns: repeat(auto-fill, 20px);
   a.social
     background: none
     border-radius: 4px
     padding: 0
+    img
+      display: block
+      height: 24px
+      width 24px
 
 .article-footer .qrcode
   width: 128px