hexo-theme-stellar 1.31.0 → 1.32.1

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/navbar.styl

@@ -1,9 +1,19 @@
 .tag-plugin.navbar
-  padding: 0
-  &:after
-    left: 0
-    right: 0
-
-@media screen and (min-width: $device-mobile-max)
-  .tag-plugin.navbar nav a
-    margin-top: 2px
+  display: inline-flex
+  background: var(--card)
+  border-radius: $border-button
+  z-index inherit
+  box-shadow: 0 0 8px hsla(black, 0.04)
+  a
+    box-sizing: border-box
+    padding: .25rem 1rem
+    margin: 2px
+    color: inherit
+    border-radius: 'calc(%s - 1px)' % $border-button
+    trans1 all
+    &+a
+      margin-left: 0
+    &.active
+      background: var(--block)
+    &:hover
+      background: var(--block)

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

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

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

@@ -5,9 +5,4 @@
     background: none 
     padding-top: 0
     padding-bottom: 0
-  table:not([class])
-    th
-      background: var(--block-hover)
-    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/quote.styl

@@ -1,4 +1,4 @@
-.tag-plugin.quote
+.tag-plugin.blockquote
   position: relative
   p:not([class])
     text-indent: 0 !important

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

@@ -1,7 +1,7 @@
 .widget-wrapper.post-list .widget-body
   a
     font-size: $fs-14
-    padding: 8px 16px
+    padding: 6px 16px
     display: block
     border-radius: $border-bar
     color: var(--text-p1)

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

@@ -26,7 +26,7 @@
   a
     --padding: calc(var(--gap-padding) / 2)
     --padding-offset: calc(0 - var(--padding))
-    padding: 6px var(--padding)
+    padding: 4px var(--padding)
     margin: 0 var(--padding)
     color: var(--text-p3)
     display: block
@@ -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, .02), 0 2px 8px rgba(black, .03), 0 4px 16px 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,12 +148,16 @@ newblur()
     border-radius: 64px
   &:before
     backdrop-filter: blur(8px)
+    -webkit-backdrop-filter: blur(8px)
+    background: var(--alpha20)
   &:after
-    --blur-px: 32px
+    --blur-px: 24px
     --blur-sat: 500%
-    background: var(--alpha20)
+    background: var(--alpha50)
     backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
-    mask: linear-gradient(rgba(white, 1), 10%, rgba(white, 0.1), 90%, rgba(white, 1)), linear-gradient(90deg, rgba(white, 1), 10%, rgba(white, 0.1), 90%, rgba(white, 1))
+    -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)

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([data-theme])
-    img,
-    .md-text .tag-plugin.chat>.content .chatcell .user-main .talk.file>.content>.top>.right>svg.icon>path
-      filter: brightness(75%)!important
-[data-theme='dark']
-    img,
-    .md-text .tag-plugin.chat>.content .chatcell .user-main .talk.file>.content>.top>.right>svg.icon>path
-      filter: brightness(75%)!important

package/source/css/_plugins/comments/artalk.styl

@@ -1,4 +1,116 @@
 .cmt-body.artalk .artalk
-  --at-color-main: $color-theme
+  margin-top: 1rem
+  .atk-editor-plug-preview
+    scrollbar(0, 0)
   .atk-main-editor
-    border-radius: $border-card
+    border-radius: $border-card
+    .atk-header,.atk-editor-user-wrap
+      border-bottom: 1px dashed var(--block-border)
+      padding: 0.5rem 1rem
+    .atk-editor-user-wrap:empty
+      visibility: hidden
+      padding: 0
+    >.atk-bottom 
+      padding: 8px
+      .atk-plug-btn
+        border-radius: 32px
+        height: 2rem
+        width 2rem
+      .atk-send-btn
+        height: 2rem
+        border-radius: 100px
+        min-width: 5em
+        trans1 all
+        &:hover
+          --at-color-main: $color-hover
+        &:empty
+          display: none
+  .atk-list-comments-wrap>.atk-comment-wrap
+    border-radius: $border-card
+    background: var(--card)
+    box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.02)
+    >.atk-comment
+      padding: 1rem
+    &+.atk-comment-wrap
+      margin-top: .5rem
+  .atk-comment-children
+    border-top: 1px dashed var(--block-border)
+    margin-top: .5rem
+  .atk-avatar
+    padding: 0
+  .atk-avatar img
+    border-radius: 50%
+    width: 36px
+    height: 36px
+  .atk-comment-wrap>.atk-comment>.atk-main
+    margin-left: calc(36px + .5rem)
+  .atk-comment>.atk-main>.atk-header .atk-item.atk-nick
+    color: var(--text-p3)
+    font-weight: 500
+
+  .atk-badge-wrap span
+    border-radius: 100px
+  .atk-height-limit-btn
+    padding: 0.5rem 2rem
+  .atk-list-read-more 
+    margin-top: 2.5rem
+    padding-bottom: 1.5rem
+    .atk-list-read-more-inner
+      padding: 1rem 2rem
+      border-radius: $border-button
+      height: 3rem
+      width: 12rem
+      margin: -1.5rem auto 0
+  .atk-error-layer
+    background: none
+
+.cmt-body
+  .artalk, .atk-layer-wrap, .artalk.atk-dark-mode, .atk-layer-wrap.atk-dark-mode
+    --at-color-font: var(--text-p1)
+    --at-color-deep: var(--text-p2)
+    --at-color-sub: var(--text-p3)
+    --at-color-grey: var(--text-p4)
+    --at-color-meta: var(--text-p4)
+    --at-color-border: var(--block-border)
+    --at-color-light: var(--theme-link)
+    --at-color-bg: var(--card)
+    --at-color-bg-transl: var(--block-border)
+    --at-color-bg-grey: var(--block)
+    --at-color-bg-grey-transl: orange
+    --at-color-bg-light: rgba(29, 161, 242, 1)
+    --at-color-main: $color-theme
+    --at-color-red: $c-red
+    --at-color-green: $c-green
+    --at-color-gradient: linear-gradient(180deg, transparent, var(--card), 50%, var(--card))
+
+.md-text .atk-comment>.atk-main>.atk-body
+  overflow: visible
+
+
+// override
+.md-text .cmt-body.artalk .artalk
+  --gap-p: 1rem
+  p
+    line-height: 1.5
+    font-size: $fs-15
+    >img
+      margin: var(--gap-p) auto
+      border-radius: $border-image-s
+  a>img
+    display: inline
+  p>img[atk-emoticon]
+    max-height: 1.5em
+    transform: scale(1.2)
+    margin: 0 4px
+    vertical-align: bottom
+  ul li, ol li
+    font-size: $fs-14
+  blockquote
+    position: relative
+    border-left: none
+    background: none
+    padding: 0.25rem 1rem
+    p
+      color: var(--text-p3)
+  .atk-content a
+    --at-color-main: var(--theme-link)

package/source/css/_plugins/comments/twikoo.styl

@@ -5,7 +5,7 @@
   .tk-content
     .vemoji, .tk-owo-emotion
       width: unset
-      border-radius: $border-image
+      border-radius: $border-image-s
       max-height: 24px
       max-width: 100px
       display: inline
@@ -13,7 +13,7 @@
     img
       max-width: 400px
       max-height: 400px
-      border-radius: $border-image
+      border-radius: $border-image-s
 
 .OwO
   .OwO-body
@@ -111,7 +111,7 @@
     border: none
     padding: 6px 2rem
     border-radius: $border-card
-    background: var(--block-hover)
+    background: var(--block)
     color: var(--text-p1)
     line-height: 2
     font-size: 14px

package/source/css/_plugins/index.styl

@@ -20,13 +20,13 @@ if hexo-config('plugins.katex.enable')
   @import 'katex'
 
 // 评论
-if hexo-config('comments.service') == 'beaudar'
+if hexo-config('comments.service') == 'beaudar' or index(hexo-config('comments.custom_css'), 'beaudar') >= 0
   @import 'comments/beaudar'
-if hexo-config('comments.service') == 'twikoo'
+if hexo-config('comments.service') == 'twikoo' or index(hexo-config('comments.custom_css'), 'twikoo') >= 0
   @import 'comments/twikoo'
-if hexo-config('comments.service') == 'utterances'
+if hexo-config('comments.service') == 'utterances' or index(hexo-config('comments.custom_css'), 'utterances') >= 0
   @import 'comments/utterances'
-if hexo-config('comments.service') == 'waline'
+if hexo-config('comments.service') == 'waline' or index(hexo-config('comments.custom_css'), 'waline') >= 0
   @import 'comments/waline'
-if hexo-config('comments.service') == 'artalk'
+if hexo-config('comments.service') == 'artalk' or index(hexo-config('comments.custom_css'), 'artalk') >= 0
   @import 'comments/artalk'

package/source/css/_plugins/lazyload.styl

@@ -1,9 +1,13 @@
+$lazyTransitionType = hexo-config('plugins.lazyload.transition')
+$loadingImage = hexo-config('plugins.lazyload.loading_image.src')
+$loadingImageSize = convert(hexo-config('plugins.lazyload.loading_image.size'))
+
 img.lazy
   &:not(.loaded)
     opacity: 0
   &.loaded,&.error
     opacity: 1
-  if hexo-config('plugins.lazyload.transition') == 'blur'
+  if $lazyTransitionType == 'blur'
     trans1 all 0.75s
     &:not(.loaded)
       filter blur(50px)
@@ -13,4 +17,47 @@ img.lazy
       -webkit-filter none
   else
     trans1 all 0.38s
-    
+
+
+@keyframes fadeIn
+  from { opacity: 0; }
+  to { opacity: 1; }
+
+@keyframes blurIn
+  from
+    opacity: 0
+    filter: blur(50px)
+    -webkit-filter: blur(50px)
+  to
+    opacity: 1
+    filter: blur(0px)
+    -webkit-filter: blur(0px)
+
+article img.lazy
+  &:not(.loaded)
+    opacity: 1
+    border-radius: 4px
+    filter none
+    transition: none
+  if $loadingImage
+    &.loading
+      background: url($loadingImage) center center / $loadingImageSize no-repeat
+  else
+    &.loading
+      background: url($loadingIcon) center center / $loadingImageSize no-repeat
+      min-width: $loadingImageSize
+      min-height: $loadingImageSize
+
+  &.loaded
+    animation: fadeIn 0.38s ease-out
+    if $loadingImage
+      background: none
+  if $lazyTransitionType == 'blur'
+    &.loaded
+      animation: blurIn .75s ease-out
+
+  &.error
+    background: none
+    min-width: $loadingImageSize
+    min-height: $loadingImageSize
+