hexo-theme-stellar 1.37.0 → 1.38.0

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

@@ -10,6 +10,8 @@
     display: flex
     flex-direction: row
     align-items: center
+    padding: 0 16px
+    gap: 16px
     transition: 0.38s ease-out
     z-index: 1
     border-radius: $border-card-s
@@ -31,12 +33,24 @@
         background: var(--bg-a20)
       z-index 0
       trans1 all
+    &:after
+      position: absolute
+      content: ''
+      height: 2px
+      bottom: 0
+      left: 1rem
+      right: 1rem
+      border-radius: $border-bar
+      background: convert(hexo-config('style.gradient.searchbar'))
+      background-size: 200%
+      animation: search-glow 20s linear infinite
+      opacity: 0
+      pointer-events: none
+      z-index 1
+      trans1 opacity, 0.3s
     &:hover,&:has(input:focus),&:has(input:not(:placeholder-shown))
-      &:before
-        background: var(--bg-a100)
-        height: 100%
-        left: 0
-        right: 0
+      &:after
+        opacity: 1
   .search-input
     width: 100%
     box-sizing: border-box
@@ -54,10 +68,13 @@
     border-radius: $border-bar
     display: flex
     align-items: center
-    height: 40px
+    justify-content: center
+    flex-shrink: 0
+    width: 1.5rem
+    height: 1.5rem
     svg
       height: 1rem
-      width: calc((var(--side-content-width) + var(--gap-padding) * 2 - 3 * 8px) * 0.25)
+      width: 1rem
       color: var(--text-p2)
       fill: currentColor
       path[p-id="1562"]
@@ -89,6 +106,8 @@
     scrollbar-width: none
     scrollbar(0, 0)
     border-radius: $border-bar
+    mask: linear-gradient(white, 90%, transparent)
+    -webkit-mask: linear-gradient(white, 90%, transparent)
     &:empty
       display: none
     .search-result-list
@@ -134,3 +153,23 @@
   .search-no-result
     display: block
     margin-bottom: 8px
+
+.leftbar-container > .search-wrapper
+  width: auto
+  margin: 1rem var(--gap-margin) 0
+  padding-bottom: 0
+
+.leftbar-container > .search-wrapper[searching='true']
+  flex-grow: 1
+  min-height: 0
+  display: flex
+  flex-direction: column
+  #search-result
+    flex-grow: 1
+    max-height: none
+
+@keyframes search-glow
+  from
+    background-position: 0%
+  to
+    background-position: 1000%

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

@@ -55,6 +55,10 @@
     text-align: justify
     border-radius: $border-card-l
     overflow: hidden
+    // 搜索条激活（有输入内容）时隐藏导航区与组件区，给搜索结果腾出空间
+    > .search-wrapper[searching='true']
+      & ~ .widgets
+        display: none
     >.widgets
       border-radius: $border-bar
       mask: linear-gradient(white, 90%, transparent)
@@ -94,4 +98,4 @@
       --inset: 0
       --saturate: 300%
     .leftbar-container:after
-      background: var(--bg-a20)
+      background: var(--bg-a20)

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

@@ -87,6 +87,7 @@
     right: 0
   img.avatar
     border-radius: 50%
+    corner-shape: round
     width: 48px
     height: 48px
   .bottom
@@ -129,4 +130,4 @@
 
 @media screen and (max-width: $device-mobile-max)
   .banner.top
-    border-radius: 0
+    border-radius: 0

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

@@ -187,6 +187,7 @@ chat_dark()
                     width: 32px
                     height: 32px
                     border-radius: 50%
+                    corner-shape: round
             .user-main
                 padding: 0 .5em
                 display: flex
@@ -441,6 +442,7 @@ chat_dark()
                                 width: 1rem
                                 padding: .2em
                                 border-radius: 50%
+                                corner-shape: round
                                 background: var(--chat-block)
                                 >path
                                     fill: var(--text-p1)
@@ -542,6 +544,7 @@ chat_dark()
                                 >.voice-circle
                                     border: 2px solid var(--text-p1)
                                     border-radius: 50%
+                                    corner-shape: round
                                     position: absolute
                                     &.first
                                         width: 5px
@@ -652,4 +655,3 @@ chat_dark()
     background-color: transparent;
   }
 }
-

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

@@ -3,7 +3,6 @@ details.folding
   padding: 1rem
   margin: 1rem 0
   border-radius: $border-card
-  corner-shape: superellipse(1.2)
   background: var(--theme-block)
   border: 1px solid var(--theme-border)
   summary
@@ -80,4 +79,4 @@ details.folding[child=iframe]
   >div.body
     padding: 0
     background: none
-    overflow: hidden
+    overflow: hidden

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

@@ -26,6 +26,7 @@
       position: relative
     .lazy-box
       border-radius: 64px
+      corner-shape: round
       margin: 0 0 0.5rem
     img
       object-fit: cover

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

@@ -60,6 +60,7 @@
       max-width: 100%
     .lazy-box
       border-radius: 64px
+      corner-shape: round
       floatable-trans()
     img
       object-fit: cover
@@ -158,4 +159,4 @@
       transform: scale(1.2) rotate(8deg)
       box-shadow: $boxshadow-card-float
   .post-link:hover
-    color: var(--accent)
+    color: var(--accent)

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

@@ -50,7 +50,6 @@
 .tag-plugin.gallery.grid-box
   display: grid
   .grid-cell
-    corner-shape: superellipse(1.2)
   &[size='xs']
     grid-template-columns: repeat(auto-fill, minmax(80px, 1fr))
     grid-gap: 2px
@@ -116,4 +115,4 @@
         background-color: var(--block)
   .image-meta
     border-radius: 8px
-    margin-bottom: 8px
+    margin-bottom: 8px

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

@@ -17,9 +17,8 @@
   &[bg]>.cell
     padding: 1rem
     border-radius: $border-card
-    corner-shape: superellipse(1.2)
   &[bg='box']>.cell
     background: var(--block)
   &[bg='card']>.cell
     background: var(--card)
-    hoverable-card()
+    hoverable-card()

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

@@ -5,7 +5,6 @@
   .image-bg
     text-align: center
     border-radius: $border-image
-    corner-shape: superellipse(1.2)
     position: relative
     overflow: hidden
     display: flex
@@ -24,7 +23,6 @@
       display: block
       object-fit: cover
       border-radius: $border-image
-      corner-shape: superellipse(1.2)
     .image-download
       z-index: 2
       position: absolute

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

@@ -13,7 +13,6 @@
   width: 300px
   max-width: 100%
   border-radius: $border-card-s
-  corner-shape: superellipse(1.2)
   hoverable-card()
 
 .md-text .link-card.plain

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

@@ -0,0 +1,80 @@
+.md-text .tag-plugin.mbti
+  display: block
+  border: 1px solid var(--theme-border)
+  background: var(--card)
+  color: inherit
+  text-decoration: none
+  .mbti-image
+    display: block
+    width: 100%
+    margin: 0 0 1.5rem 0
+  .mbti-title-link
+    color: inherit
+    font-weight: 600
+  .mbti-title
+    display: flex
+    align-items: center
+    justify-content: center
+    color: var(--text-p1)
+    font-weight: 600
+    margin-bottom: 1rem
+  .mbti-body
+    border-top: 1px dashed var(--block-border)
+    padding-top: 0.75rem
+    margin-top: 0.75rem
+
+  .mbti-trait + .mbti-trait
+    margin-top: 0.75rem
+
+  .mbti-labels
+    display: flex
+    justify-content: space-between
+    align-items: baseline
+    font-size: $fs-13
+    margin-bottom: 4px
+    .mbti-label.active
+      color: var(--text-p1)
+      font-weight: 600
+    .mbti-label:not(.active)
+      color: var(--text-p3)
+    .mbti-label .pct
+      color: var(--text-p3)
+      font-size: $fs-12
+
+  .mbti-progress
+    height: 4px
+    border-radius: 2px
+    position: relative
+    background: var(--theme-a30)
+    .fill
+      position: absolute
+      background: var(--theme)
+      border-radius: 2px
+      top: 0
+      left: 0
+      bottom: 0
+    .mbti-dot
+      position: absolute
+      top: -4px
+      width: 8px
+      height: 12px
+      margin-left: -4px
+      border-radius: 8px
+      background: #fff
+      box-shadow: $boxshadow-button
+      &:after
+        content: ''
+        position: absolute
+        top: 2px
+        bottom: 2px
+        left: 2px
+        width: 4px
+        border-radius: 4px
+        background: var(--theme)
+
+  .mbti-trait.reversed .fill
+    left: auto
+    right: 0
+
+.md-text .tag-plugin.note.mbti
+  padding: 2rem

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

@@ -2,7 +2,6 @@
   position: relative
   padding: 0.25rem 1rem
   border-radius: $border-card
-  corner-shape: superellipse(1.2)
   background: var(--theme-block)
   overflow: hidden
   if hexo-config('tag_plugins.note.border') == true
@@ -66,4 +65,4 @@
   --gap-p: 1rem
 
 .l_body[type=story] .tag-plugin.note .title p:not([class])
-  text-indent: 0
+  text-indent: 0

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

@@ -1,7 +1,6 @@
 .md-text .tag-plugin.okr
   position: relative
   border-radius: $border-card
-  corner-shape: superellipse(1.2)
   background: var(--theme-block)
   if hexo-config('tag_plugins.okr.border') == true
     border: 1px solid var(--theme-border)
@@ -111,4 +110,4 @@
     .okr-left .title
       padding: 0 0.25rem
     .label
-      txt-ellipsis()
+      txt-ellipsis()

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

@@ -12,7 +12,6 @@
   position: relative
   .lazy-box
     border-radius: $border-card-s
-    corner-shape: superellipse(1.2)
     box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
     overflow hidden
     >img

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

@@ -3,7 +3,6 @@
   padding-left: 16px
   p>img
     border-radius: $border-image-s
-    corner-shape: superellipse(1.2)
   &:before
     content: ''
     position: absolute
@@ -24,7 +23,6 @@
       margin-left: 0
     p>img
       border-radius: $border-image-s
-      corner-shape: superellipse(1.2)
 
 .tag-plugin.timeline .timenode
   position: relative
@@ -93,7 +91,6 @@
 .tag-plugin.timeline .body
   background: var(--card)
   border-radius: 16px
-  corner-shape: superellipse(1.2)
   border-top-left-radius: 2px
   padding: 0.5rem 1rem
   margin-top: 4px
@@ -150,7 +147,6 @@
   .lazy-box
     margin: .5rem 0
     border-radius: $border-image
-    corner-shape: superellipse(1.2)
     >img
       margin: 0 auto
 
@@ -159,7 +155,6 @@
 
 aside .tag-plugin.timeline[data-api] .body .lazy-box
   border-radius: $border-image-s
-  corner-shape: superellipse(1.2)
 
 .tag-plugin.timeline[data-api] .body .footer
   margin: 0 0 -0.5rem
@@ -242,4 +237,4 @@ aside .tag-plugin.timeline[data-api] .body .lazy-box
   .tag-plugin.image
     display: flex
     .image-bg+.image-bg
-      margin-left: 4px
+      margin-left: 4px

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

@@ -2,13 +2,16 @@
   display: grid
   grid-gap: 8px
 
+.linklist .link:hover
+  background: var(--bg-a50)
+  svg  
+    filter: unset
+
 .linklist .link
   border-radius: $border-bar
-  corner-shape: superellipse(1.2)
   color: var(--text-p2)
   min-height: 32px
   padding: 0 4px
-  trans1 background
   display: flex
   justify-content: center
   align-items: center
@@ -18,6 +21,15 @@
     svg,img
       filter: unset
 
+.l_left .linklist .link
+  &:hover, &.active
+    sidebar-light()
+    --item-grad: url(#leftbar-active-icon-grad)
+    > svg [fill="currentColor"]
+      fill: var(--item-grad)
+    > svg [stroke="currentColor"]
+      stroke: var(--item-grad)
+
 .linklist .link span
   padding: 0 4px
   txt-ellipsis()
@@ -43,8 +55,3 @@
     transform: scale(1.2)
   span 
     padding: 0 8px
-
-.linklist .link:hover
-  background: var(--bg-a100)
-  svg  
-    filter: unset

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

@@ -25,6 +25,7 @@
   .avatar
     display: block
     border-radius: 100%
+    corner-shape: round
     margin: 1rem auto 1.25rem auto
     max-width: 128px
     overflow: hidden
@@ -92,4 +93,4 @@
       font-weight: 500
 
 .widget-wrapper.user-card .widget-header+.widget-body
-  margin-top: 4px
+  margin-top: 4px

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

@@ -4,25 +4,37 @@
     padding: 6px 16px
     display: block
     border-radius: $border-bar
-    corner-shape: superellipse(1.2)
     color: var(--text-p1)
-    trans1 background
-    &.active,&:hover
-      background: var(--bg-a100)
+    &:hover
+      background: var(--bg-a50)
+    &.active
+      background: var(--bg-a50)
   a+a
     margin-top: 2px
   a  
     display: flex
     justify-content: space-between
     align-items: center
+    gap: 16px
     .title
       txt-ellipsis()
     svg
       flex-shrink: 0
-      height: 1em
-      width: auto
-      transform: scale(1.2)
+      width: 1.5rem
+      height: 1.5rem
+      &.active-icon
+        width: 1rem
+        height: 1rem
+
+.l_left .widget-wrapper.post-list .widget-body a
+  &:hover, &.active
+    sidebar-light()
+    --item-grad: url(#leftbar-active-icon-grad)
+    > svg [fill="currentColor"]
+      fill: var(--item-grad)
+    > svg [stroke="currentColor"]
+      stroke: var(--item-grad)
 
 .widget-wrapper.post-list
   .widget-body+.widget-header
-    margin-top: 28px
+    margin-top: 28px

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

@@ -13,8 +13,11 @@
   .link:hover
     background: var(--bg-a100)
 
+.l_left .widget-wrapper.markdown .linklist .link:hover
+  sidebar-light()
+
 .l_right .widget-wrapper.markdown .linklist
   .link
     background: var(--block)
   .link:hover
-    background: var(--theme-a20)
+    background: var(--theme-a20)

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

@@ -30,9 +30,11 @@
     overflow: hidden
     -webkit-line-clamp: 2
   
-  .item
-    trans1 background
-  .item.active
-    background: var(--bg-a50)
   .item:hover
     background: var(--bg-a50)
+  .item.active
+    background: var(--bg-a50)
+
+.l_left .widget-wrapper.post-card .widget-body .item
+  &:hover, &.active
+    sidebar-light()

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

@@ -134,10 +134,10 @@
     trans1 all
     overflow hidden
 .l_right .widgets .widget-wrapper.toc .widget-header .cap-action:hover
-  background: var(--block-border)
+  sidebar-light(var(--bg-a50))
 .l_right .widgets .widget-wrapper.toc.collapse
   .widget-header .cap-action
-    background: var(--block-border)
+    sidebar-light(var(--bg-a50))
   .widget-body
     grid-template-rows: 0fr
 

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

@@ -11,6 +11,7 @@
   z-index: 1
   line-height: 1.2
   margin: 0 var(--gap-margin)
+  padding-bottom: 32px
   .widget-wrapper
     .widget-header
       padding-left: var(--gap-padding)
@@ -26,14 +27,14 @@
         display: block
       >span
         text-align: left
-        opacity 0.6
+        opacity 0.3
       &:empty
         display: none
       .cap-action
         line-height: 0
         color: inherit
-        opacity 0.6
-        trans2: opacity background
+        opacity 0.3
+        trans1 opacity
         border-radius: 4px
         padding: 6px
         margin-right: -6px
@@ -44,7 +45,7 @@
           fill: var(--text-p2)
         &:hover
           color: var(--accent)
-          background: var(--bg-a100)
+          sidebar-light(var(--bg-a50))
           opacity 1
           svg
             fill: var(--accent)
@@ -59,7 +60,7 @@
 
 .widget-wrapper
   display: block
-  padding-bottom: 32px
+  margin-top: 32px
 
 .l_right .widgets
   &:empty 
@@ -77,7 +78,3 @@
   @media screen and (min-width: $device-laptop)
     .widget-wrapper.markdown .widget-body
       background: var(--block)
-
-.leftbar-container
-  .header+.widgets
-    margin-top: 1rem

package/source/css/_custom.styl

@@ -61,6 +61,7 @@ $border-image-l = convert(hexo-config('style.border-radius.image-l'))
 $border-image = convert(hexo-config('style.border-radius.image'))
 $border-image-s = convert(hexo-config('style.border-radius.image-s'))
 $border-button = 8px
+$corner-shape = convert(hexo-config('style.corner-shape') || 'superellipse(1.2)')
 
 // 可以动态变化的属性
 :root
@@ -102,4 +103,4 @@ $boxshadow-float = 0 4px 8px 0px rgba(0, 0, 0, 0.1)
 $boxshadow-card-float = 0 12px 16px -4px rgba(0, 0, 0, 0.2)
 $boxshadow-button = 0 0 2px 0px rgba(0, 0, 0, 0.04), 0 0 8px 0px rgba(0, 0, 0, 0.04)
 $boxshadow-block = 0 1px 4px 0px rgba(0, 0, 0, 0.02), 0 2px 8px 0px rgba(0, 0, 0, 0.02)
-$boxshadow-toast = 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 12px 16px -4px rgba(0, 0, 0, 0.2)
+$boxshadow-toast = 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 12px 16px -4px rgba(0, 0, 0, 0.2)

package/source/css/_defines/const.styl

@@ -50,5 +50,5 @@ $c-cyan = #1BCDFC
 $c-blue = #2196f3
 $c-purple = #9c27b0
 
-$leftbar-bottom-margin = 96px
+$leftbar-bottom-margin = 32px
 $rightbar-bottom-margin = 96px

package/source/css/_defines/func.styl

@@ -133,6 +133,18 @@ hoverable-card()
     @media (prefers-color-scheme: dark)
       ondark()
 
+// 侧栏高亮项的顶部光照效果（无过渡动画）：
+// 在 hover/active 背景上叠加顶部白色光照渐变与高光边，深浅色模式分别调优透明度
+sidebar-light($bg = unquote('var(--bg-a50)'), $light = 0.38, $edge = 0.45, $dark-light = 0.05, $dark-edge = 0.1)
+  background: linear-gradient(180deg, rgba(white, $light), rgba(white, 0) 50%), $bg
+  box-shadow: inset 0 1px 0 rgba(white, $edge)
+  :root[data-theme="dark"] &
+    background: linear-gradient(180deg, rgba(white, $dark-light), rgba(white, 0) 20%), $bg
+    box-shadow: inset 0 1px 0 rgba(white, $dark-edge)
+  @media (prefers-color-scheme: dark)
+    background: linear-gradient(180deg, rgba(white, $dark-light), rgba(white, 0) 20%), $bg
+    box-shadow: inset 0 1px 0 rgba(white, $dark-edge)
+
 newblur()
   box-shadow: 0 0 2px rgba(black, .04), 0 2px 8px rgba(black, .04), 0 4px 16px rgba(black, .04)
   trans1: all
@@ -178,4 +190,4 @@ newblur()
     :root[data-theme="dark"] &
       box-shadow: inset 0 0 2px 1px rgba(white, 0.2)
     @media (prefers-color-scheme: dark)
-      box-shadow: inset 0 0 2px 1px rgba(white, 0.2)
+      box-shadow: inset 0 0 2px 1px rgba(white, 0.2)