hexo-theme-stellar 1.40.0 → 1.42.0

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

@@ -4,23 +4,67 @@
 .article.banner
   --text-banner: var(--text)
   background: var(--block)
+  // 背景图同时作为横幅自身背景承载（跟随 corner-shape），子图保留用于 hover 滤镜
+  background-image: var(--bg-url)
+  background-size: cover
+  background-position: center
   margin: 0
   height: unset
+  // Safari 26.4/26.5 合成层裁剪 bug（WebKit 312584/319993，STP 242/249 才修）：
+  // 带 filter:blur() 的合成子层（同图模糊层 :before/:after）不执行父级 overflow:hidden + border-radius 圆角裁剪；
+  // 子层自身 border-radius/overflow 无效（319993 复现注释），父层 clip-path 实测仍被绕过。
+  // 官方建议（WebKit 67950）：让圆角父层自身成为层叠上下文并强制合成，使圆角裁剪在合成层层面作用于全部子层。
+  // 对照：正常工作的 cover 卡片 .post-card 自带 z-index:0 + position:relative（层叠上下文）。
+  // clip-path 保留作为正常浏览器裁剪与额外防御；移动端圆角归零时随 `.banner.top` 一并关闭（见 tag-plugins/banner.styl）
+  isolation: isolate
+  transform: translateZ(0)
+  // clip-path 会把角落硬裁为普通圆角，覆盖 corner-shape；支持 corner-shape 的浏览器移除，
+  // 仅在不支持的浏览器（Safari/Firefox）保留圆角兜底
+  @supports not (corner-shape: superellipse(1))
+    clip-path: 'inset(0 round %s)' % $border-card-l
 
 .article.banner
   .bg+.content
     min-height: 200px
     aspect-ratio: hexo-config('article.banner_ratio')
+    position: relative
     --text-banner: white
     --button-hover-bg: rgba(white, 0.25)
 
 .article.banner .content
   .top
+    display: flex
+    flex-direction: column
+    justify-content: flex-start
     align-items: flex-start
     margin: 1rem calc(1rem - 4px)
+  .top-row
+    display: flex
+    justify-content: space-between
+    align-items: flex-start
+    width: 100%
+    .right
+      display: flex
+      align-items: center
+      flex-shrink: 0
+      white-space: nowrap
+      .reading
+        opacity: .8
+        padding: 4px
+  .meta-row
+    width: 100%
+  .bottom
+    margin-top: auto
   .title
     font-size: $fsh1
     color: var(--text-banner)
+  .subtitle
+    // 小字用主题色变体（split 模式下由插件写入 --text-banner-theme）
+    color: var(--text-banner-theme, var(--text-banner))
+  .reading
+    color: var(--text-banner-theme, var(--text-banner))
+  .meta-row
+    color: var(--text-banner-theme, var(--text-banner))
   h1
     line-height: 1.2
     margin: 0.25rem 0
@@ -30,48 +74,28 @@
 
 
 
-// 动画配置
+// 背景图覆盖层：与文章列表封面统一（常驻同图渐变模糊层 + 黑色蒙版，hover 放大/变暗）
 .article.banner
+  cover-overlay(var(--bg-url), both, '.bg+.content')
+  .bg
+    // hover 放大用 1.5s 缓动，亮度/饱和度仍按 0.2s（与文章列表封面一致）
+    filter: brightness(var(--img-br)) saturate(var(--img-sat))
+    transition: all .2s ease-out, transform 1.5s ease-out
+    -moz-transition: all .2s ease-out, transform 1.5s ease-out
+    -webkit-transition: all .2s ease-out, transform 1.5s ease-out
+    -o-transition: all .2s ease-out, transform 1.5s ease-out
+  &:hover .bg
+    transform: scale(var(--cover-zoom))
   .bg+.content
-    --blur-bg: rgba(black, 0)
-    --blur-px: 1em
-    --blur-sat: 100%
+    // 大尺寸 banner 的模糊层高度按原观感覆盖（默认值见 cover-overlay）
     --blur-height-top: 6rem
     --blur-height-bottom: 7rem
-    --blur-opacity: 0
-    &:hover
-      --blur-bg: rgba(black, 0.1)
-      --blur-sat: 150%
-      --blur-height-top: 6rem
-      --blur-height-bottom: 7rem
-      --blur-opacity: 1
-    background: var(--blur-bg)
-    trans1 all
-    &:before,&:after
-      content: ''
-      position: absolute
-      z-index 0
-      top: 0
-      left: 0
-      width: 100%
-      height: 100%
-      // Chromium: corner-shape + overflow:hidden 的合成层裁剪与 backdrop-filter 不兼容，
-      // 渐变模糊改用同图模糊层（filter + mask）实现，观感与 backdrop-filter 等价
-      background-image: var(--bg-url)
-      background-size: cover
-      background-position: center
-      filter: blur(var(--blur-px)) saturate(var(--blur-sat))
-      trans1 all
-      opacity var(--blur-opacity)
-      pointer-events: none
-    &:before
-      mask: linear-gradient(black, rgba(black, 0.75) calc(var(--blur-height-top) * 0.5), transparent var(--blur-height-top))
-      -webkit-mask: linear-gradient(black, rgba(black, 0.75) calc(var(--blur-height-top) * 0.5), transparent var(--blur-height-top))
-    &:after
-      mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height-bottom) * 0.5), transparent var(--blur-height-bottom))
-      -webkit-mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height-bottom) * 0.5), transparent var(--blur-height-bottom))
+    &:before, &:after
+      // 模糊层自身也加 clip-path：该合成层是 Safari 跳过父级圆角裁剪的直接漏出源
+      @supports not (corner-shape: superellipse(1))
+        clip-path: 'inset(0 round %s)' % $border-card-l
     .top,.bottom
-      z-index 1
+      z-index: 1
   
 
 .article.banner

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

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

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

@@ -1,29 +1,24 @@
 // 面包屑导航
 .bread-nav
   font-weight: 500
-  display: flex
-  justify-content: space-between
-  color: var(--text-banner)
+  color: var(--text-banner-theme, var(--text-banner))
   .left
     flex: 1
     min-width: 0
+    display: flex
+    align-items: baseline
   .flex-row
     display: flex
     align-items: baseline
     flex-direction: row
-  #breadcrumb
-    .reading.right
-      margin-left: auto
-      white-space: nowrap
-      opacity: .8
   a
-    color: var(--text-banner)
+    color: var(--text-banner-theme, var(--text-banner))
     padding: 4px
     border-radius: 2px
     &:hover
       background: var(--button-hover-bg)
   span 
-    color: var(--text-banner)
+    color: var(--text-banner-theme, var(--text-banner))
   span.sep
     opacity 0.5
     margin: 0
@@ -39,6 +34,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
@@ -49,12 +56,12 @@
   a  
     display: flex
     align-items: center
-    color: var(--text-banner)
+    color: var(--text-banner-theme, var(--text-banner))
     svg
       margin-right: 4px
     &.bold 
       font-weight: 600
-      color: var(--text-banner)
+      color: var(--text-banner-theme, var(--text-banner))
     span 
       margin-left: 4px
     &:hover

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

@@ -1,17 +1,25 @@
 .navbar
   z-index: 8
-  top: var(--gap-margin)
+  top: var(--gap-page)
   position: sticky
   position: -webkit-sticky
 
 .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/partial/post-panel.styl

@@ -0,0 +1,76 @@
+// 描述 + 文章链接列表公共组件（友链文章订阅 friends_and_posts、专栏卡片 topic_card 共用）
+.post-panel
+  display: flex
+  justify-content: space-between
+  flex-direction: column
+  height: 100%
+  position: relative
+  // 与友链卡片一致的行高（友链上下文由 .user-post-card 提供，专栏上下文在 md-text 下需自行声明）
+  line-height: 1.2
+  .desc
+    font-size: 1.2rem
+    color: var(--text-p3)
+    font-weight: 400
+    margin: 1rem 0
+    margin-right: auto
+    position: relative
+    &:before
+      position: absolute
+      font-weight: 900
+      font-size: 32px
+      color: var(--block-border)
+      top: 0
+      content: '“'
+      left: -16px
+      trans1 all
+  .posts
+    margin: 0.5rem 0 1rem 0
+    display: flex
+    flex-direction: column
+    align-items: flex-start
+  .post-link
+    display: flex
+    flex-direction: column
+    color: var(--text-p1)
+    position: relative
+    trans1 color
+    &+.post-link
+      margin-top: 1rem
+    &:before
+      content: ''
+      position: absolute
+      left: -12px
+      top: 2px
+      height: 'calc(%s - 2px)' % $fs-14
+      width: 4px
+      border-radius: 4px
+      background: var(--block-border)
+      trans1 all
+    &:hover
+      color: var(--accent)
+    &:hover:before
+      background: var(--accent)
+      height: 100%
+      top: 0
+    span
+      display: -webkit-box
+      -webkit-box-orient: vertical
+      overflow: hidden
+      -webkit-line-clamp: 1
+      position: relative
+    .title
+      font-size: $fs-14
+      font-weight: 500
+      max-width: 100%
+      display: -webkit-box
+      -webkit-box-orient: vertical
+      overflow: hidden
+      -webkit-line-clamp: 2
+      position: relative
+    .date
+      font-size: $fs-12
+      color: var(--text-p3)
+      margin-top: 0.25rem
+  .no-post
+    font-size: $fs-13
+    color: var(--text-p4)

package/source/css/_components/pin-slider.styl

@@ -1,10 +1,15 @@
 // 置顶内容轮播（navbar top 上方通用置顶位）
 .pin-slider
   position: relative
-  margin: 0 1rem var(--gap-margin)
+  margin: 0 1rem var(--gap-base)
   border-radius: $border-card-l
   overflow: hidden
   box-shadow: $boxshadow-card
+  // 背景图由 .pin-slider 自身背景承载（跟随 corner-shape），由插件按当前 slide 同步 --pin-cover-url；
+  // 子图保留用于滑动动画与 hover 滤镜，角落楔形区由容器背景（同图）无缝补位
+  background-image: var(--pin-cover-url)
+  background-size: cover
+  background-position: center
   // 初始化前隐藏，避免先闪出第一张；定位到缓存序号后再显示
   visibility: hidden
 
@@ -19,42 +24,28 @@
   height: 15rem
   overflow: hidden
   background: var(--card)
+  // 带封面幻灯片背景改透明，让 .pin-slider 自身背景（corner-shape 圆角）透出；
+  // 无封面幻灯片保持白卡
+  &:not(.no-cover)
+    background: transparent
   @media screen and (max-width: $device-mobile-max)
     height: 11rem
+  // 带封面幻灯片（post 封面幻灯片 + wiki/项目幻灯片）接入通用底部覆盖层：
+  // 同图渐变模糊层 + 黑色渐变蒙版，hover 放大/变暗参数与文章列表封面统一
+  &.post-slide:not(.no-cover), &:not(.post-slide)
+    cover-overlay(var(--pin-cover-url), bottom)
   &:hover
     .pin-slide-bg
-      transform: scale(1.04)
-      filter: brightness(.92) saturate(1.1)
+      transform: scale(var(--cover-zoom))
 
 // 文章幻灯片：固定「标题 + 一行小字」结构，宽高比与非置顶文章一致（article.cover_ratio）；
-// 文字区与 poster 卡片 cover-info 一致（同款渐变模糊层 + 四周间距）；无封面时为纯白卡片
+// 文字区与 hero 卡片 cover-info 一致（同款渐变模糊层 + 四周间距）；无封面时为纯白卡片
 .pin-slide.post-slide
   display: block
   height: auto
   aspect-ratio: hexo-config('article.cover_ratio')
-  --img-br: 100%
-  --img-sat: 100%
-  --blur-px: 1em
-  --blur-height: 128px
-  --blur-sat: 120%
   .pin-slide-bg
     z-index: 0
-  // 渐变模糊层：与 poster 卡片 .cover:before 一致（同图模糊 + 底部渐变 mask）
-  &:not(.no-cover)::before
-    content: ''
-    z-index: 1
-    position: absolute
-    top: 0
-    left: 0
-    width: 100%
-    height: 100%
-    background-image: var(--pin-cover-url)
-    background-size: cover
-    background-position: center
-    filter: brightness(var(--img-br)) saturate(var(--img-sat)) blur(var(--blur-px)) saturate(var(--blur-sat))
-    mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height) * 0.5), transparent var(--blur-height))
-    -webkit-mask: linear-gradient(to top, black, rgba(black, 0.75) calc(var(--blur-height) * 0.5), transparent var(--blur-height))
-    transition: transform .5s ease-out
   .pin-slide-text
     position: absolute
     bottom: 0
@@ -64,10 +55,13 @@
     width: 100%
     box-sizing: border-box
     text-align: left
+    // 大字 contrast（--text-banner）、小字 theme（--text-banner-theme），由自适应插件写入
+    --text-banner: white
+    color: var(--text-banner)
     .pin-slide-headline
       font-weight: 500
       font-size: $fsh3
-      color: white
+      color: var(--text-banner)
       text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
       white-space: nowrap
       overflow: hidden
@@ -78,17 +72,13 @@
     .pin-slide-caption
       margin-top: 4px
       font-size: $fs-14
-      color: white
+      color: var(--text-banner-theme, inherit)
       text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
       white-space: nowrap
       overflow: hidden
       text-overflow: ellipsis
       @media screen and (max-width: $device-mobile)
         font-size: $fs-13
-  &:not(.no-cover) .pin-slide-text
-    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2))
-  &:not(.no-cover):hover::before
-    transform: scale(1.04)
   // 无封面卡片：纯白底 + 普通文章文字颜色
   &.no-cover
     background: var(--card)
@@ -106,21 +96,24 @@
   width: 100%
   height: 100%
   object-fit: cover
-  transition: transform .5s ease-out, filter .2s ease-out
-
-.pin-slide-mask
-  position: absolute
-  inset: 0
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.68) 100%)
+  // hover 放大用 1.5s 缓动，亮度/饱和度仍按 0.2s（与文章列表封面一致）
+  filter: brightness(var(--img-br)) saturate(var(--img-sat))
+  transition: all .2s ease-out, transform 1.5s ease-out
+  -moz-transition: all .2s ease-out, transform 1.5s ease-out
+  -webkit-transition: all .2s ease-out, transform 1.5s ease-out
+  -o-transition: all .2s ease-out, transform 1.5s ease-out
 
 .pin-slide-info
   position: absolute
   left: 0
   right: 0
   bottom: 0
-  z-index: 1
+  z-index: 2
   padding: 1.5rem 6rem 1.75rem 2rem
   text-align: left
+  // 大字 contrast（--text-banner）、小字 theme（--text-banner-theme），由自适应插件写入
+  --text-banner: white
+  color: var(--text-banner)
   @media screen and (max-width: $device-mobile-max)
     padding: 1rem 3.5rem 1.25rem 1.25rem
 
@@ -137,17 +130,20 @@
   backdrop-filter: blur(4px)
   -webkit-backdrop-filter: blur(4px)
   font-size: $fs-13
-  color: white
+  color: var(--text-banner-theme, white)
 
 .pin-slide-title
   font-size: $fsh3
   font-weight: 600
   line-height: 1.3
-  color: white
+  color: var(--text-banner)
   trans1 color
   @media screen and (max-width: $device-mobile-max)
     font-size: $fsh5
 
+.pin-slide-excerpt
+  color: var(--text-banner-theme, var(--text-banner))
+
 .pin-slider-dots
   position: absolute
   left: 0
@@ -210,6 +206,8 @@
   top: 50%
   transform: translateY(-50%)
   z-index: 3
+  // 箭头颜色随当前幻灯片封面自适应（插件写入 --text-banner；未计算时回退主题文字色）
+  color: var(--text-banner, var(--text))
   display: flex
   align-items: center
   justify-content: center
@@ -218,7 +216,6 @@
   padding: 1rem .25rem
   border: none
   bar-glass(40px)
-  color: var(--text)
   cursor: pointer
   opacity: 0
   &.prev

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

@@ -1,5 +1,5 @@
 .l_left footer.footer
-  margin: 0.5rem var(--gap-margin) 1rem
+  margin: 0.5rem var(--gap-base) 1rem
 
 .social-wrap
   display: grid

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

@@ -87,7 +87,7 @@
         opacity: 1 !important
 
 .wiki-home-wrap
-  margin: 1rem var(--gap-margin) .5rem
+  margin: 1rem var(--gap-base) .5rem
 
 .wiki-home
   display: flex
@@ -95,7 +95,7 @@
   align-items: center
   padding: 6px 16px 6px 12px
   border-radius: 32px
-  background: var(--bg-a50)
+  sidebar-light()
   color: var(--text-p2)
   font-size: $fs-13
   trans2 color background

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%)
 
@@ -158,7 +178,7 @@
 
 .leftbar-container > .search-wrapper
   width: auto
-  margin: 1.5rem var(--gap-margin) 0
+  margin: 1.5rem var(--gap-base) 0
   padding-bottom: 0
 
 .leftbar-container > .search-wrapper[searching='true']

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

@@ -1,19 +1,19 @@
 .l_left
-  margin: var(--gap-margin)
-  max-height: calc(100vh - var(--gap-margin) * 2)
+  margin: var(--gap-page)
+  max-height: calc(100vh - var(--gap-page) * 2)
   border-radius: $border-card-l
   .header
-    margin: var(--gap-max) var(--gap-margin) 0
+    margin: var(--gap-base) var(--gap-base) 0
 
 .l_right
-  margin: 0
+  margin: var(--gap-page) 0
   border-radius: $border-card-l
 @media screen and (min-width: $device-2k)
   .l_left
     margin-left: auto
-    margin-right: calc(2 * var(--gap-max))
+    margin-right: calc(2 * var(--gap-page))
   .l_right
-    margin-left: var(--gap-max)
+    margin-left: var(--gap-page)
     margin-right: auto
 
 // 纯色卡片风格（style.leftbar.ui-style: card）：
@@ -73,7 +73,7 @@
           background-color: convert($leftbar-background-color-dark)
 
   .leftbar-container
-    height: calc(100vh - var(--gap-margin) * 2)
+    height: calc(100vh - var(--gap-page) * 2)
     display: flex
     flex-direction: column
     word-break: break-all