hexo-theme-stellar 1.31.0 → 1.32.0

package/source/css/_components/layout.styl

@@ -1,7 +1,9 @@
 .l_body
   display: grid
   grid-template-columns: 1fr minmax(200px,var(--width-main)) 1fr
-  grid-gap: var(--gap-margin)
+  grid-gap: calc(var(--gap-margin) * 4)
+  @media screen and (max-width: $device-desktop)
+    grid-gap: calc(var(--gap-margin) * 2)
   margin: auto
   font-size: var(--fsp)
 
@@ -16,11 +18,10 @@
 
 .l_body .l_left
   justify-self: right
-  top: 8px
+  top: calc(var(--gap-margin) * 2)
 .l_body .l_right
   justify-self: left
-  --gap-margin: 0px
-  max-height: calc(100% - 8px * 2)
+  max-height: calc(100% - calc(var(--gap-margin) * 2) * 2)
   .widgets
     height: 100%
     overflow visible
@@ -32,16 +33,16 @@
   .laptop-only
     display: block !important
   .l_body
+    grid-gap: calc(var(--gap-margin) * 1)
     .l_right
-      top: 8px
       position: fixed
       transform: translateX(320px)
       transition: transform .38s ease-out
       margin: 0
       --inset: 8px
       right: var(--inset)
-      top: var(--inset)
-      max-height: 'calc(%s - %s)' % (100vh $rightbar-bottom-margin)
+      top: calc(var(--gap-margin) * 2)
+      max-height: 'calc(%s - %s * 2 - %s)' % (100vh var(--gap-margin) $rightbar-bottom-margin)
       box-shadow: $boxshadow-card-float
       z-index: 10
       background: var(--site-bg)
@@ -70,11 +71,11 @@
       margin: 0
       --inset: 8px
       left: var(--inset)
-      top: var(--inset)
-      max-height: 'calc(%s - %s)' % (100vh $leftbar-bottom-margin)
+      top: calc(var(--gap-margin) * 2)
+      max-height: 'calc(%s - %s * 2 - %s)' % (100vh var(--gap-margin) $leftbar-bottom-margin)
       .leftbar-container
         --inset: 8px
-        height: 'calc(%s - %s)' % (100vh $leftbar-bottom-margin)
+        height: 'calc(%s - %s * 2 - %s)' % (100vh var(--gap-margin) $leftbar-bottom-margin)
       box-shadow: $boxshadow-card-float
       z-index: 10
     .l_main

package/source/css/_components/list.styl

@@ -120,13 +120,16 @@
       right: 0
       height: var(--blur-height)
       backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
+      -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
       trans1 all
     &[position=top]:before
       top: 0
       mask: linear-gradient(black, rgba(black, 0.75), transparent)
+      -webkit-mask: linear-gradient(black, rgba(black, 0.75), transparent)
     &[position=bottom]:before
       bottom: 0
       mask: linear-gradient(transparent, rgba(black, 0.75), black)
+      -webkit-mask: linear-gradient(transparent, rgba(black, 0.75), black)
     .cover-info
       padding: 1.5rem 1rem
       position: absolute

package/source/css/_components/main.styl

@@ -2,7 +2,7 @@
   position: relative
   padding-bottom: var(--gap-max)
   @media screen and (min-width: $device-mobile-max)
-    padding-top: 8px
+    padding-top: calc(var(--gap-margin) * 2)
   header
     margin: 2rem 1rem 1rem
     .logo-wrap

package/source/css/_components/md.styl

@@ -24,7 +24,7 @@
   ul:not(:last-child),
   ol:not(:last-child)
     padding-bottom: .5rem
-    margin: 0
+    margin: 0 .25rem
   blockquote,ul,ol
     p,ul,ol
       --fsp: $fsp1
@@ -75,9 +75,11 @@
 
 // 图片样式
 .md-text img
-  border-radius: $border-image
   margin: auto
   display: block
+.md-text.content 
+  p>img, .tag-plugin.image .image-bg
+    border-radius: $border-image
 
 // 链接样式
 li:not([class]) a:not([class])

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

@@ -67,7 +67,7 @@
       opacity: .5
       font-size: $fs-12
     &:hover
-      background: var(--block-hover)
+      background: var(--block-border)
       color: var(--text)
       .badge
         opacity: 1
@@ -99,7 +99,7 @@
         color $color-theme
         opacity: 1
       color: var(--text)
-      background: var(--block-hover)
+      background: var(--block-border)
 
 @media screen and (min-width: $device-mobile)
   .post-list.author #archive

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
+  --gap-p: 2rem
+  div.tag-plugin,p>img
+    margin-top: 2.4rem
+    margin-bottom: 2.4rem
   // 段落标题
   h1,h2,h3,h4,h5,h6
     color: var(--text)
@@ -116,6 +120,8 @@
       text-indent: 0
       text-align: convert(hexo-config('style.text-align'))
 
+  p>img, .tag-plugin.image .image-bg
+    border-radius: $border-image-l
 
 
 .l_body[type=story] .article.banner .content .bottom.only-title

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

@@ -1,4 +1,4 @@
-.l_body[type='tech'] .md-text
+.l_body[type='tech'] article.content
   h1,h2,h3,h4,h5,h6
     color: var(--text)
     line-height: 1.8

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

@@ -24,7 +24,7 @@
         color $color-theme
         opacity: 1
       color: var(--text)
-      background: var(--block-hover)
+      background: var(--block-border)
 
 .post-list .post-card .meta.cap .tag
   &:before

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
@@ -44,7 +44,7 @@
       background: convert(hexo-config('style.leftbar.background'))
     
   .leftbar-container
-    height: 'calc(%s - 80px)' % 100vh
+    height: 'calc(%s - %s * 2 - %s)' % (100vh var(--gap-margin) $leftbar-bottom-margin)
     display: flex
     flex-direction: column
     word-break: break-all
@@ -52,7 +52,9 @@
     border-radius: $border-card-l
     overflow: hidden
     >.widgets
-      mask: linear-gradient(transparent, white, 10%, white, 90%, transparent)
+      border-radius: $border-bar
+      mask: linear-gradient(white, 90%, transparent)
+      -webkit-mask: linear-gradient(white, 90%, transparent)
     >*
       z-index 1
     &:before,&:after
@@ -69,7 +71,9 @@
         background: rgba(white, 0.5)
         box-shadow: inset 0 0 32px 1px rgba(white, 0.5)
         backdrop-filter: saturate(300%)
+        -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)

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/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/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)