hexo-theme-stellar 1.30.4 → 1.32.0

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

@@ -49,18 +49,21 @@
       position: absolute
       z-index 0
       left: 0
-      width: 100%
+      right: 0
       backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
+      -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
       trans1 all
       opacity var(--blur-opacity)
     &:before
       top: 0
       height: var(--blur-height-top)
       mask: linear-gradient(black, rgba(black, 0.75), transparent)
+      -webkit-mask: linear-gradient(black, rgba(black, 0.75), transparent)
     &:after
       bottom: 0
       height: var(--blur-height-bottom)
       mask: linear-gradient(transparent, rgba(black, 0.75), black)
+      -webkit-mask: linear-gradient(transparent, rgba(black, 0.75), black)
     .top,.bottom
       z-index 1
   

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

@@ -7,7 +7,7 @@
     transition: background 0.2s ease-out
     &:hover
       color: var(--text)
-      background: var(--block-hover)
+      background: var(--block-border)
 
 .page-footer .sitemap
   margin: .5rem -4px 2rem

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

@@ -1,6 +1,6 @@
 .navbar
   z-index: 8
-  top: 8px
+  top: calc(var(--gap-margin) * 2)
   position: sticky
   position: -webkit-sticky
 
@@ -46,6 +46,7 @@
       cursor default
       pointer-events: none
       backdrop-filter: saturate(300%)
+      -webkit-backdrop-filter: saturate(300%)
     &.active:after
       content: ''
   a+a

package/source/css/_components/sidebar/nav-area.styl

@@ -1,2 +1,2 @@
 .nav-area
-  margin: 32px var(--gap-margin) 0
+  margin: 1rem var(--gap-margin) 0

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

@@ -1,21 +1,40 @@
 
 .search-wrapper
+  padding-bottom: 32px
   width: 100%
+  border-radius: $border-card-s
   >.search-form
     position: sticky
-    margin-bottom: 8px
-    top: 1rem
+    top: 0
     height: 40px
     display: flex
     flex-direction: row
     align-items: center
     transition: 0.38s ease-out
-    z-index: 0
-    border-radius: $border-bar
+    z-index: 1
+    border-radius: $border-card-s
     color: var(--text)
-    background: var(--alpha50)
-    &:has(input:focus)
+    >*
+      z-index: 1
+    &:before
+      position: absolute
+      content: ''
+      height: 2px
+      bottom: 0
+      left: 1rem
+      right: 1rem
+      border-radius: $border-bar
       background: var(--alpha100)
+      @media screen and (prefers-color-scheme: dark)
+        background: var(--alpha20)
+      z-index 0
+      trans1 all
+    &:hover,&:has(input:focus),&:has(input:not(:placeholder-shown))
+      &:before
+        background: var(--alpha100)
+        height: 100%
+        left: 0
+        right: 0
   .search-input
     width: 100%
     box-sizing: border-box
@@ -23,6 +42,10 @@
     font-size: $fs-14
     padding: 12px 0
     color: var(--text)
+    &::placeholder
+      color: var(--text-p3)
+      @media screen and (prefers-color-scheme: dark)
+        color: var(--text-p2)
   .search-button 
     border-radius: $border-bar
     display: flex
@@ -30,8 +53,7 @@
     height: 40px
     svg
       height: 1rem
-      width: 40px
-      margin-left: 4px
+      width: calc((var(--side-content-width) + var(--gap-padding) * 2 - 3 * 8px) * 0.25)
       color: var(--text-p2)
       fill: currentColor
       path[p-id="1562"]
@@ -52,33 +74,34 @@
     text-align: center
     font-size: $fs-14
     padding: 2rem
+    margin: 8px 0
     background: var(--alpha20)
-    border-radius: $border-card
+    border-radius: $border-card-s
 
 
   #search-result
     max-height: 60vh
-    overflow: scroll
+    overflow: auto
     scrollbar-width: none
     scrollbar(0, 0)
-    border-radius: $border-card
+    border-radius: $border-bar
     &:empty
       display: none
     .search-result-list
       padding: 0
-      margin: 0
+      margin: 8px 0
       list-style-type: none
     li a
-        display: block
-        background: var(--alpha20)
-        line-height: 1.2
-        padding: 0.75rem 1rem
-        border-radius: $border-card
-        trans1 background
-        &:hover
-          background: var(--alpha100)
+      display: block
+      background: var(--alpha20)
+      line-height: 1.2
+      padding: 0.75rem 1rem
+      border-radius: $border-card-s
+      trans1 background
+      &:hover
+        background: var(--alpha100)
     li+li
-        margin-top: 8px
+      margin-top: 8px
     .search-result-title
       color: var(--text-p1)
       font-weight: 700

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

@@ -1,12 +1,12 @@
 .l_left
-  margin: 8px
-  max-height: 'calc(%s - 16px)' % 100vh
+  margin: calc(var(--gap-margin) * 2) var(--gap-margin)
+  max-height: 'calc(%s - %s * 2 - %s)' % (100vh var(--gap-margin) $leftbar-bottom-margin)
   border-radius: $border-card-l
   .header
     margin: var(--gap-max) var(--gap-margin) 0
 
 .l_right
-  margin: 8px
+  margin: calc(var(--gap-margin) * 2) 0
   border-radius: $border-card-l
 @media screen and (min-width: $device-2k)
   .l_left
@@ -20,10 +20,11 @@
   .sidebg
     pointer-events: none
     position: absolute
-    top: 0
-    bottom: 0
-    left: 0
-    right: 0
+    --inset: 0
+    top: var(--inset)
+    bottom: var(--inset)
+    left: var(--inset)
+    right: var(--inset)
     background-position: center
     background-size: cover
     border-radius: $border-card-l
@@ -32,8 +33,7 @@
     --brightness: 100%
     if hexo-config('style.leftbar') && hexo-config('style.leftbar.background-image')
       if hexo-config('style.leftbar.blur-px')
-        left: 20%
-        right: 20%
+        --inset: 32px
       background-image: convert(hexo-config('style.leftbar.background-image'))
       filter: saturate(var(--saturate)) brightness(var(--brightness)) blur(var(--blur-px))
       @media screen and (prefers-color-scheme: dark)
@@ -44,13 +44,19 @@
       background: convert(hexo-config('style.leftbar.background'))
     
   .leftbar-container
-    height: 'calc(%s - 16px)' % 100vh
+    height: 'calc(%s - %s * 2 - %s)' % (100vh var(--gap-margin) $leftbar-bottom-margin)
     display: flex
     flex-direction: column
     word-break: break-all
     text-align: justify
     border-radius: $border-card-l
     overflow: hidden
+    >.widgets
+      border-radius: $border-bar
+      mask: linear-gradient(white, 90%, transparent)
+      -webkit-mask: linear-gradient(white, 90%, transparent)
+    >*
+      z-index 1
     &:before,&:after
       position: absolute
       pointer-events: none
@@ -65,7 +71,9 @@
         background: rgba(white, 0.5)
         box-shadow: inset 0 0 32px 1px rgba(white, 0.5)
         backdrop-filter: saturate(300%)
-        mask: linear-gradient(black, rgba(black, 0.5), 80%, transparent, 90%, transparent)
+        -webkit-backdrop-filter: saturate(300%)
+        mask: linear-gradient(black, rgba(black, 0.5), 70%, transparent, 90%, transparent)
+        -webkit-mask: linear-gradient(black, rgba(black, 0.5), 70%, transparent, 90%, transparent)
 
       @media screen and (prefers-color-scheme: dark)
         background: rgba(white, 0.05)
@@ -76,11 +84,7 @@
     overflow: hidden
     background: var(--alpha100)
     .sidebg
-      left: 0
-      right: 0
+      --inset: 0
       --saturate: 300%
-      
-      
-@media screen and (max-width: $device-mobile-max) and (prefers-color-scheme: dark)
-  .l_left .leftbar-container:after
-    background: var(--alpha20)
+    .leftbar-container:after
+      background: var(--alpha20)

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

@@ -1,5 +1,5 @@
 .banner
-  border-radius: $border-card
+  border-radius: $border-image
   &.top
     border-radius: $border-card-l
   position: relative

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

@@ -4,7 +4,7 @@ a.tag-plugin.button
   display: inline-flex
   align-items: baseline
   justify-content: center
-  padding: 0 4px
+  padding: 0 .5rem
   trans1 background
   margin: .5em 0
   font-size: 1em
@@ -23,10 +23,9 @@ a.tag-plugin.button
 a.tag-plugin.button[size='xs']
   margin: 0
   border-radius: 4px
-  svg,img
+  padding: 0 4px
+  svg,img,span
     margin: 0 2px
-  span
-    margin: 2px
 
 a.tag-plugin.button:hover
   --theme: $color-hover

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

@@ -35,4 +35,4 @@
     padding: 0 .75rem
     color: var(--text-p2)
     &:hover
-      background: var(--block-hover)
+      background: var(--block-border)

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

@@ -46,7 +46,7 @@
   >img
     floatable-trans()
   &:hover
-    background: var(--block-hover)
+    background: var(--block-border)
     img
       transform: scale(1.2) rotate(8deg)
       box-shadow: $boxshadow-card-float

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

@@ -96,6 +96,8 @@
     img  
       width: 100%
       height: 100%
+      &.loading
+        background-size: convert(hexo-config('plugins.lazyload.loading_image.size'))
 
 // 瀑布流布局
 .tag-plugin.gallery.flow-box
@@ -107,6 +109,10 @@
     img  
       width: 100%
       height: 100%
+      border-radius: 8px
+    &:has(img.loading),&:has(img.error)
+      img
+        background-color: var(--block)
   .image-meta
     border-radius: 8px
     margin-bottom: 8px

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

@@ -1,11 +1,21 @@
 .tag-plugin.image
   margin-top: 1rem
   margin-bottom: 1rem
+  box-sizing: border-box
   .image-bg
     text-align: center
     border-radius: $border-image
     position: relative
     overflow: hidden
+    display: flex
+    box-sizing: border-box
+    flex-direction: column
+    justify-content: center
+    align-items: center
+    margin: auto
+    max-width: 100%
+    &:has(img.lazy.loading),&:has(img.lazy.error)
+      background-color: var(--block)
     &:hover
       .image-download
         opacity: 1 !important

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

@@ -1,4 +1,4 @@
-.tag-plugin.video
+.tag-plugin.video-player
   line-height: 0
   margin: auto
   video, iframe

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

@@ -30,7 +30,7 @@
     background: none
 .md-text .tag-plugin.note:not([color])
   .highlight, pre
-    background: var(--block-hover)
+    background: var(--block-border)
 .md-text .tag-plugin.note[child=codeblock]
   padding: 0
   background: var(--theme-codeblock)

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

@@ -7,7 +7,7 @@
     padding-bottom: 0
   table:not([class])
     th
-      background: var(--block-hover)
+      background: var(--block-border)
     td,th
       border-color: var(--block-border)
 

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

@@ -84,14 +84,14 @@
     bottom: -8px
     border-radius: 100%
     background: var(--text)
-    opacity: 0.2
+    opacity: 0.1
     filter: blur(2px)
     trans1 all
   &:hover
     .content
       transform: translateY(-4px) scale(1.05)
       .text:after
-        opacity: 0.3
+        opacity: 0.2
         filter: blur(8px)
         transform: translateY(4px) scale(1.2, 1.5)
 

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

@@ -32,7 +32,7 @@
     &:after
       content: ''
       position: absolute
-      background: var(--block-hover)
+      background: var(--block-border)
       width: 100%
       height: 2px
       bottom: 0
@@ -54,7 +54,7 @@
         margin: 0 2px
         &:hover
           color: var(--text-p1)
-          background: var(--block-hover)
+          background: var(--block-border)
         i
           pointer-events: none
       &.active a
@@ -81,9 +81,10 @@
     flex-direction: column
     .tab-pane
       display: block
-      overflow: hidden
+      max-width: 100%
       &:not(.active)
         height: 0
+        overflow: hidden
       &.active
         height: auto
   .tab-content:has(.grid-box),.tab-pane:has(.grid-box)

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

@@ -5,7 +5,7 @@
     content: ''
     position: absolute
     z-index: 0
-    background: var(--block-hover)
+    background: var(--block)
     width: 4px
     left: 0px
     border-radius: 8px
@@ -183,7 +183,7 @@
     border-color: var(--block-border)
     color: inherit
     &:hover
-      background: var(--block-hover)
+      background: var(--block-border)
       
   .reaction 
     border-color: var(--block)

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

@@ -12,7 +12,7 @@ details.toc
     font-size: $fs-13
     font-weight: 500
     &:hover
-      background: var(--block-hover)
+      background: var(--block-border)
 
   >div.body
     margin: var(--gap-p) 1rem 1rem

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

@@ -6,9 +6,7 @@
     border-radius: $border-bar
     color: var(--text-p1)
     trans1 background
-    &.active
-      background: var(--alpha50)
-    &:hover
+    &.active,&:hover
       background: var(--alpha100)
   a+a
     margin-top: 2px

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

@@ -5,13 +5,6 @@
     background: var(--alpha50)
     >*:first-child
       margin-top: .75rem
-    a:not([class])
-      trans1 all
-      border-bottom: 1px solid var(--text)
-      color: var(--text)
-      &:hover
-        color: $color-hover
-        border-bottom: 1px solid $color-hover
 
 .widget-wrapper.markdown .linklist
   margin: 1em 0

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

@@ -43,7 +43,7 @@
       background: $color-theme
       border-radius: 4px
     &:hover
-      background: var(--block-hover)
+      background: var(--block-border)
       color: var(--text)
     
 // 固定位置
@@ -51,13 +51,15 @@
   margin-top: 0
   position: sticky
   position: -webkit-sticky
-  top: 0
+  top: calc(var(--gap-margin) * 1)
   padding: 16px 0
   &:first-child
-    top: 8px
+    top: calc(var(--gap-margin) * 2)
     padding-top: 1rem
   .widget-body .toc
     max-height: 70vh
+    @media screen and (max-width: $device-desktop)
+      max-height: 60vh
     @media screen and (max-width: $device-laptop)
       max-height: unset
     overflow: auto
@@ -159,7 +161,7 @@
       width: auto
       margin-right: 8px
   a:hover
-    background: var(--block-hover)
+    background: var(--block-border)
     color: var(--text)
 
 .widget-wrapper.toc+.widget-wrapper

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

@@ -61,11 +61,6 @@
   display: block
   padding-bottom: 32px
 
-.l_left .widgets
-  .widget-wrapper
-    &:first-child
-      margin-top: 32px
-
 .l_right .widgets
   &:empty 
     display: none

package/source/css/_custom.styl

@@ -24,6 +24,9 @@ $iQuoteRight = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wid
 $h3Left = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M13.488 4.43a.75.75 0 0 1 .081 1.058L7.988 12l5.581 6.512a.75.75 0 1 1-1.138.976l-6-7a.75.75 0 0 1 0-.976l6-7a.75.75 0 0 1 1.057-.081' clip-rule='evenodd'/%3E%3Cpath fill='currentColor' d='M17.75 5a.75.75 0 0 0-1.32-.488l-6 7a.75.75 0 0 0 0 .976l6 7A.75.75 0 0 0 17.75 19z'/%3E%3C/svg%3E"
 $h3Right = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M10.512 4.43a.75.75 0 0 0-.081 1.058L16.012 12l-5.581 6.512a.75.75 0 1 0 1.138.976l6-7a.75.75 0 0 0 0-.976l-6-7a.75.75 0 0 0-1.057-.081' clip-rule='evenodd'/%3E%3Cpath fill='currentColor' d='M6.25 5a.75.75 0 0 1 1.32-.488l6 7a.75.75 0 0 1 0 .976l-6 7A.75.75 0 0 1 6.25 19z'/%3E%3C/svg%3E"
 
+$loadingIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231cd0fd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath stroke-dasharray='16' stroke-dashoffset='16' d='M12 3c4.97 0 9 4.03 9 9'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.6s' values='16;0'/%3E%3CanimateTransform attributeName='transform' dur='3s' repeatCount='indefinite' type='rotate' values='0 12 12;360 12 12'/%3E%3C/path%3E%3Cpath stroke-dasharray='64' stroke-dashoffset='64' stroke-opacity='0.3' d='M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='2.4s' values='64;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E"
+
+
 if hexo-config('style.font-family.body')
   $ff-body = convert(hexo-config('style.font-family.body'))
 
@@ -63,7 +66,9 @@ $border-card-l = convert(hexo-config('style.border-radius.card-l'))
 $border-card = convert(hexo-config('style.border-radius.card'))
 $border-card-s = convert(hexo-config('style.border-radius.card-s'))
 $border-bar = convert(hexo-config('style.border-radius.bar'))
+$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
 
 // 可以动态变化的属性
@@ -100,13 +105,6 @@ $border-button = 8px
   // 元素文本内容到容器边缘的间距
   --gap-max: calc(var(--gap-margin) + var(--gap-padding))
 
-// 文章布局风格
-.l_body[type=story]
-  --gap-p: 2rem
-  div.tag-plugin,p>img
-    margin-top: 2.4rem
-    margin-bottom: 2.4rem
-
 // shadow
 $boxshadow-card = 0 1px 2px 0px rgba(0, 0, 0, 0.1)
 $boxshadow-float = 0 4px 8px 0px rgba(0, 0, 0, 0.1)

package/source/css/_defines/const.styl

@@ -54,5 +54,5 @@ $hue-yellow = 50
 $cDeepOrange = hsl(14 100% 57%)
 
 
-$leftbar-bottom-margin = 128px
+$leftbar-bottom-margin = 96px
 $rightbar-bottom-margin = 96px

package/source/css/_defines/func.styl

@@ -107,7 +107,7 @@ hover-block($v, $h, $br = 4px)
   padding: $v $h
   trans2 color background
   &:hover
-    background: var(--block-hover)
+    background: var(--block-border)
 
 floatable-trans()
   trans2 transform box-shadow
@@ -134,7 +134,7 @@ hoverable-card()
       ondark()
 
 newblur()
-  box-shadow: 0 0 2px rgba(black, .05), 0 0 8px rgba(black, .05)
+  box-shadow: 0 0 2px rgba(black, .04), 0 2px 8px rgba(black, .04), 0 4px 16px rgba(black, .04)
   trans1: all
   &:before,&:after
     z-index -1
@@ -148,13 +148,17 @@ newblur()
     border-radius: 64px
   &:before
     backdrop-filter: blur(8px)
+    -webkit-backdrop-filter: blur(8px)
+    background: var(--alpha20)
   &:after
-    --blur-px: 16px
+    --blur-px: 24px
     --blur-sat: 500%
     background: var(--alpha50)
     backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
-    mask: linear-gradient(rgba(white, 1), 10%, rgba(white, 0.2), 90%, rgba(white, 1)), linear-gradient(90deg, rgba(white, 1), 10%, rgba(white, 0.2), 90%, rgba(white, 1))
-    box-shadow: inset 0 0 8px 1px white
+    -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
+    mask: linear-gradient(rgba(white, 1), 10%, rgba(white, 0.05), 90%, rgba(white, 1)), linear-gradient(90deg, rgba(white, 1), 10%, rgba(white, 0.05), 90%, rgba(white, 1))
+    -webkit-mask: linear-gradient(rgba(white, 1), 10%, rgba(white, 0.05), 90%, rgba(white, 1)), linear-gradient(90deg, rgba(white, 1), 10%, rgba(white, 0.05), 90%, rgba(white, 1))
+    box-shadow: inset 0 0 4px 1px rgba(white, 0.5)
     trans1 all
     @media (prefers-color-scheme: dark)
       opacity 0.4

package/source/css/_defines/theme.styl

@@ -56,9 +56,8 @@ _common_root()
 _light_root()
   --site-bg: hsl($color-background-h, $color-background-s, $color-background-l)
   --card: hsl($color-block-h, $color-block-s, 100)
-  --block: hsl($color-block-h, $color-block-s, 95)
-  --block-border: hsl($color-block-h, $color-block-s, 90)
-  --block-hover: hsl($color-block-h, $color-block-s, 92)
+  --block: hsla(black, 0.04)
+  --block-border: hsla(black, 0.08)
   --theme-link-opa: rgba($color-link, 0.2)
   --leftbar-bg: hsl($color-block-h, $color-block-s, 90)
   --alpha20: rgba(white, 0.2)
@@ -82,10 +81,9 @@ _light_root()
 
 _dark_root()
   --site-bg: hsl($color-background-h, $color-background-s * 0.5, (100 - $color-background-l) * 2 + 8)
-  --card: hsl($color-block-h, $color-block-s * 1.2, 24)
-  --block: hsl($color-block-h, $color-block-s, 16)
+  --card: hsl($color-block-h, $color-block-s * 1.2, 16)
+  --block: hsl($color-block-h, $color-block-s, 20)
   --block-border: hsl($color-block-h, $color-block-s, 24)
-  --block-hover: hsl($color-block-h, $color-block-s, 20)
   --theme-link-opa: rgba($color-link, 0.4)
   --leftbar-bg: hsl($color-block-h, $color-block-s, 24)
   --alpha20: rgba(black, 0.2)
@@ -120,12 +118,3 @@ _common_root()
   @media (prefers-color-scheme: dark)
     _dark_root()
 
-@media (prefers-color-scheme: dark)
-  :root:not([color-scheme])
-    img,
-    .md-text .tag-plugin.chat>.content .chatcell .user-main .talk.file>.content>.top>.right>svg.icon>path
-      filter: brightness(75%)!important
-[color-scheme='dark']
-    img,
-    .md-text .tag-plugin.chat>.content .chatcell .user-main .talk.file>.content>.top>.right>svg.icon>path
-      filter: brightness(75%)!important