hexo-theme-stellar 1.41.0 → 1.42.0

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

@@ -178,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

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

@@ -2,6 +2,10 @@
   border-radius: $border-image
   &.top
     border-radius: $border-card-l
+  // 背景图同时作为横幅自身背景承载（跟随 corner-shape），子图保留用于 hover 滤镜
+  background-image: var(--bg-url)
+  background-size: cover
+  background-position: center
   position: relative
   overflow: hidden
   display: flex 
@@ -15,12 +19,15 @@
     z-index: 0
   .content 
     z-index: 1
+    position: relative
     width: 100%
     height: 100%
     display: flex
     flex-direction: column
     justify-content: space-between
     .top
+      // 文字区保持在背景图（img.bg z-index 0）之上
+      z-index: 1
       display: flex
       justify-content: space-between
       align-items: center
@@ -37,7 +44,8 @@
         .link
           margin: 0
           border-radius: 4px
-          color: rgba(white, 0.8)
+          color: var(--text-banner-theme, var(--text-banner))
+          opacity: .8
           padding: 2px 6px
           background: none
           line-height: 1.5
@@ -48,10 +56,12 @@
           &:after
             content: none
           &:hover
-            color: white
+            color: var(--text-banner-theme, var(--text-banner))
+            opacity: 1
             background: rgba(white, 0.25)
           &.active
-            color: white
+            color: var(--text-banner-theme, var(--text-banner))
+            opacity: 1
             background: rgba(white, 0.25)
         
       .back
@@ -64,7 +74,7 @@
         svg
           width: 20px
           height: 20px
-          fill: white
+          fill: var(--text-banner-theme, var(--text-banner))
   .banner-link
     position: absolute
     top: 0
@@ -91,13 +101,17 @@
     width: 48px
     height: 48px
   .bottom
+    // 同 .top：文字区保持在背景图之上
+    z-index: 1
     display: flex
     padding: 1rem
     width: 100%
     box-sizing: border-box
   .title
     font-size: 1.5rem
-    font-weight: 600
+    font-weight: 700
+    // 与封面 headline 同款描边，避免标题在复杂背景上发虚
+    text-shadow: 0 2px 4px rgba(0,0,0,0.2)
   .avatar+.text-area
     margin-left: 0.75rem
   .text-area .text
@@ -108,26 +122,54 @@
     font-size: 1.2rem
   .subtitle
     font-size: $fs-14
+    color: var(--text-banner-theme, var(--text-banner))
   .content:only-child
     color: var(--text-p1)
   .bg+.content 
-    color: white
+    --text-banner: white
+    color: var(--text-banner)
     .avatar
-      border: 2px solid white
+      border: 2px solid var(--text-banner)
       margin: 0
     .bottom
-      background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2))
       text-shadow: 0 0 1px rgba(0,0,0,0.12)
 
 .tag-plugin.banner
-  trans1(transform, 2s)
+  // 内容区用绝对定位铺满整卡：避免 flex 百分比高度（height: 100%）在不同浏览器解析不一致，
+  // 导致 .top/.bottom 无法贴顶/贴底（navbar 掉到中间）
+  .content
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+  // banner 标签不使用渐变模糊覆盖层（cover-overlay 仅用于封面/页顶 banner）：
+  // 纯背景图 + 自适应文字颜色，hover 保留背景图放大与变暗
+  --img-br: 100%
+  --img-sat: 100%
+  --cover-zoom: 1.05
   &:hover
+    --img-br: 75%
+    --img-sat: 120%
     img.bg
-     transform: scale(1.01)
+      transform: scale(var(--cover-zoom))
+  img.bg
+    filter: brightness(var(--img-br)) saturate(var(--img-sat))
+    // 封面放大用 1.5s 缓动，其余属性（亮度/饱和度）保持主题默认 0.2s
+    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
 
 .tag-plugin.banner .navbar a.active
-  blur-effect()
+  // 不使用 blur-effect()（backdrop-filter）：banner 是 overflow:hidden + 圆角/连续曲率的裁剪容器，
+  // backdrop-filter 在部分浏览器（Safari / 旧版 Chromium）会破坏父级圆角裁剪，
+  // hover 放大背景图时四角变直角；改用与 hover 一致的半透明白底
+  background: rgba(white, 0.25)
+  &:hover
+    background-color: var(--card)
 
 @media screen and (max-width: $device-mobile-max)
   .banner.top
     border-radius: 0
+    clip-path: none

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

@@ -67,96 +67,15 @@
       display: block
       width: 64px
       height: 64px
-      
-    
-  .previews
-    display: flex
-    justify-content: space-between
-    flex-direction: column
-    height: 100%
-    position: relative
-    .empty
-      min-height: 1rem
-    .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
-    .spacer
-      height: 100%
-    .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:before
-        background: var(--accent)
-        // height: calc(100% - 4px)
-        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)
-
-
 // transform
 .users-posts-wrap .user-post-card
   &:hover
-    .desc
-      &:before
-        color: var(--accent)
-        transform: scale(1.2) translateX(-4px)
+    .post-panel
+      .desc
+        &:before
+          color: var(--accent)
+          transform: scale(1.2) translateX(-4px)
   .card-link:hover
     .lazy-box
       transform: scale(1.2) rotate(8deg)
       box-shadow: $boxshadow-card-float
-  .post-link:hover
-    color: var(--accent)

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

@@ -94,6 +94,9 @@
       aspect-ratio: 2 / 3
   .grid-cell
     background: var(--block)
+    >.lazy-box
+      width: 100%
+      height: 100%
     img  
       width: 100%
       height: 100%

package/source/css/_components/tag-plugins/read/paper.styl

@@ -2,8 +2,8 @@
   display: flex
   flex-direction: column
   align-items: center
-  padding-top: var(--gap-padding)
-  padding-bottom: var(--gap-padding)
+  padding-top: var(--gap-base)
+  padding-bottom: var(--gap-base)
   >.content
     border-left: 1px dashed var(--text-meta)
     border-right: 1px dashed var(--text-meta)
@@ -95,4 +95,4 @@
   p
     margin: 0
   >.title
-    border-top: 1px solid var(--text-meta)
+    border-top: 1px solid var(--text-meta)

package/source/css/_components/tag-plugins/read/reel.styl

@@ -2,8 +2,8 @@
   display: flex
   flex-direction: column
   align-items: center
-  padding-top: var(--gap-padding)
-  padding-bottom: var(--gap-padding)
+  padding-top: var(--gap-base)
+  padding-bottom: var(--gap-base)
   >.content
     display: flex
     flex-direction: column
@@ -22,7 +22,7 @@
     >.body
       overflow: auto
       scrollbar()
-      margin: 'calc(%s - 4px) %s' % var(--gap-padding)
+      margin: 'calc(%s - 4px) %s' % var(--gap-base)
       .main
         p
           margin: 0;
@@ -100,4 +100,4 @@
       top: calc(100% + 1rem - 6px)
       bottom: calc(-1rem - 6px)
       border-radius: 4px
-      background: var(--accent)
+      background: var(--accent)

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

@@ -194,6 +194,10 @@ aside .tag-plugin.timeline[data-api] .body .lazy-box
     display: flex 
     align-items: center
     border-color: var(--link)
+    svg
+      width: 1em
+      height: 1em
+      vertical-align: -0.125em
     &:first-child 
       margin-left: 0
     &:last-child 

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

@@ -14,7 +14,7 @@
     z-index 1
     margin-top: 0.25rem
     .header
-      margin: 0.25rem var(--gap-padding)
+      margin: 0.25rem var(--gap-base)
       .user-info
         background: none
         padding-right: 0
@@ -22,7 +22,7 @@
         display: none
 
     .header:before
-      left: calc(6px - var(--gap-padding))
+      left: calc(6px - var(--gap-base))
     .body
       border-radius: $border-card
       padding: 0.5rem 1rem

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

@@ -31,7 +31,7 @@
     margin: 0
     list-style: none
   a
-    --padding: calc(var(--gap-padding) / 2)
+    --padding: calc(var(--gap-base) / 2)
     --padding-offset: calc(0 - var(--padding))
     padding: 4px var(--padding)
     margin: 0 var(--padding)
@@ -61,7 +61,7 @@
   top: 0
   padding: 1rem 0
   &:first-child
-    top: var(--gap-margin)
+    top: var(--gap-page)
     padding-top: 1rem
   .widget-body .toc
     max-height: 70vh
@@ -148,8 +148,8 @@
   background: var(--block-border)
   top: 0
   height: 1px
-  left: var(--gap-padding)
-  right: var(--gap-padding)
+  left: var(--gap-base)
+  right: var(--gap-base)
 .widget-wrapper.toc .widget-footer
   margin-top: 8px
   color: var(--text-p2)
@@ -160,12 +160,18 @@
     align-items: center
     color: inherit
     font-size: $fs-14
-    padding: 8px var(--gap-padding)
+    padding: 8px var(--gap-base)
     border-radius: $border-bar
     trans1 all
-    svg,img
+    svg
+      width: 16px
+      height: 16px
+      flex-shrink: 0
+      margin-right: 8px
+    img
       height: 16px
       width: auto
+      flex-shrink: 0
       margin-right: 8px
   a:hover
     background: var(--block-border)

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

@@ -10,11 +10,11 @@
   scrollbar(0, 0)
   z-index: 1
   line-height: 1.2
-  margin: 0 var(--gap-margin)
+  margin: 0 var(--gap-base)
   .widget-wrapper
     .widget-header
-      padding-left: var(--gap-padding)
-      padding-right: var(--gap-padding)
+      padding-left: var(--gap-base)
+      padding-right: var(--gap-base)
       display: flex
       justify-content: space-between
       align-items: baseline
@@ -64,19 +64,20 @@
 .l_left .widgets
   padding-bottom: 64px
 .l_right .widgets
-  padding: 16px 0
+  padding: 0
   &:empty 
     display: none
   .widget-wrapper:first-child
     margin-top: 0
   .widget-wrapper
     .widget-header
-      padding-left: var(--gap-padding)
-      padding-right: var(--gap-padding)
+      padding-left: var(--gap-base)
+      padding-right: var(--gap-base)
   // 小屏幕
   @media screen and (max-width: $device-laptop)
+    padding: var(--gap-base) 0
     .widget-wrapper
-      margin-top: var(--gap-margin)
+      margin-top: var(--gap-base)
       border-radius: $border-card-s
   // 大屏幕
   @media screen and (min-width: $device-laptop)

package/source/css/_custom.styl

@@ -64,10 +64,14 @@ $corner-shape = convert(hexo-config('style.corner-shape'))
   
   // 侧边栏文字内容宽度
   --side-content-width: 224px
-  // 元素轮廓到容器边缘的间距
-  --gap-margin: 16px
-  // 元素文本内容到元素自身的轮廓的间距
-  --gap-padding: 16px
+  // 组件内部基础间距（margin/padding 统一）
+  --gap-base: 16px
+  // 页面级留白（侧边栏/内容区/列间距），笔记本及以上放宽
+  --gap-page: 16px
+  @media screen and (min-width: $device-laptop)
+    --gap-page: 32px
+  // 右栏宽度增量（在 --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
@@ -83,11 +87,6 @@ $corner-shape = convert(hexo-config('style.corner-shape'))
   @media screen and (max-width: $device-mobile-max)
     --side-content-width: 224px
 
-// 动态计算值
-:root
-  // 元素文本内容到容器边缘的间距
-  --gap-max: calc(var(--gap-margin) + var(--gap-padding))
-
 // shadow
 $boxshadow-card = 0 1px 2px 0px rgba(0, 0, 0, 0.1)
 $boxshadow-float = 0 4px 8px 0px rgba(0, 0, 0, 0.05)