hexo-theme-stellar 1.40.0 → 1.42.0

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

@@ -1,8 +1,19 @@
 // 表格标签（#466）：{% table style:scroll|wrap|compact %}
 .tag-plugin.table
   table
-    border-collapse: collapse
+    display: table
+    border-collapse: separate
+    border-spacing: 0
     width: 100%
+    border: 1px solid var(--block-border)
+    border-radius: $border-card
+    overflow: hidden
+    th
+      border-top: none
+    th, td
+      border-left: 1px solid var(--block-border)
+      &:first-child
+        border-left: none
   &.table-scroll
     overflow-x: auto
     -webkit-overflow-scrolling: touch
@@ -14,24 +25,18 @@
   &.table-wrap
     table
       table-layout: fixed
-      border-collapse: separate
-      border-spacing: 0
-      border: 1px solid var(--block-border)
-      border-radius: $border-card
-      overflow: hidden
       tr
         white-space: normal
-      th
-        border-top: none
       th, td
         word-break: break-word
         overflow-wrap: anywhere
         padding: 8px 1em
-        border-left: 1px solid var(--block-border)
-        &:first-child
-          border-left: none
   &.table-compact
+    overflow-x: auto
+    -webkit-overflow-scrolling: touch
+    scrollbar()
     table
+      min-width: max-content
       th, td
         padding: 4px 1em
         line-height: 1.4

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

@@ -48,6 +48,12 @@
   filter: grayscale(100%) brightness(0.8) opacity(0.8)
   trans1 filter
   flex-shrink: 0
+.linklist .link .active-dot
+  flex-shrink: 0
+  width: 8px
+  height: 8px
+  border-radius: 50%
+  background: x-theme-gradient()
 
 .widget-body .linklist.left
   grid-gap: 2px

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

@@ -25,6 +25,12 @@
       &.active-icon
         width: 1rem
         height: 1rem
+    .active-dot
+      flex-shrink: 0
+      width: 8px
+      height: 8px
+      border-radius: 50%
+      background: x-theme-gradient()
 
 .l_left .widget-wrapper.post-list .widget-body a
   &:hover, &.active

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
@@ -142,14 +142,14 @@
     grid-template-rows: 0fr
 
 // 操作按钮（回到顶部 / 参与讨论）
-.widget-wrapper.toc .widget-body+.widget-footer:before 
+.widget-wrapper.toc .widget-footer:before
   content: ''
   position absolute
   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

@@ -42,22 +42,11 @@ $c-link = convert(hexo-config('style.color.link'))
 
 $c-base-hue = 210deg // 背景/文本颜色的主基调（一般看不出来不需要修改）
 
-// icons
-
-$iQuoteLeft = "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 BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M3.691 6.292C5.094 4.771 7.217 4 10 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 6.925 10H10a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2H3a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789M20 20h-6a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789C16.094 4.771 18.217 4 21 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.9 2.9 0 0 0 17.925 10H21a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2'/%3E%3C/svg%3E"
-$iQuoteRight = "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 BoxIcons Solid by Atisa - https://creativecommons.org/licenses/by/4.0/ --%3E%3Cpath fill='currentColor' d='M20.309 17.708C22.196 15.66 22.006 13.03 22 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292m-11.007 0C11.19 15.66 10.999 13.03 10.993 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.9 2.9 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292'/%3E%3C/svg%3E"
-
-$iH3Left = "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"
-$iH3Right = "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"
-
-$iLoadingIcon = "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"
-
-
 $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'))
-$bar-item-gap = 2px // bar 容器内按钮/标签之间的间距与距边距离（gap + padding 共用）
+$bar-item-gap = 4px // bar 容器内按钮/标签之间的间距与距边距离（gap + padding 共用）
 $border-bar-container = 'calc(%s + %s)' % ($border-bar $bar-item-gap) // bar 容器圆角 = 按钮圆角（$border-bar）+ 间距，保持同心
 $border-image-l = convert(hexo-config('style.border-radius.image-l'))
 $border-image = convert(hexo-config('style.border-radius.image'))
@@ -75,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
@@ -94,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)

package/source/css/_defines/func.styl

@@ -1,9 +1,9 @@
-svg-mask-icon($svg)
-  -webkit-mask-image: url($svg)
+svg-mask-icon($img)
+  -webkit-mask-image: $img
   -webkit-mask-repeat: no-repeat
   -webkit-mask-position: center
   -webkit-mask-size: contain
-  mask-image: url($svg)
+  mask-image: $img
   mask-repeat: no-repeat
   mask-position: center
   mask-size: contain
@@ -109,6 +109,31 @@ hover-block($v, $h, $br = 4px)
   &:hover
     background: var(--block-border)
 
+// 标签胶囊（标签页 /blog/tags/ 与文章底部标签复用；间距由容器负边距抵消）
+tag-chip()
+  display: inline-flex
+  align-items: center
+  position: relative
+  color: var(--text-p2)
+  margin: .5rem
+  padding: .5em .75rem
+  border-radius: 999px
+  background: var(--block)
+  font-size: $fs-13
+  font-weight: 500
+  trans1 all
+  svg
+    width: 1em
+    height: 1em
+    margin-right: .25em
+    opacity: .4
+  &:hover
+    color: var(--text)
+    background: var(--block-border)
+    svg
+      color: var(--theme)
+      opacity: 1
+
 floatable-trans()
   trans2 transform box-shadow
 floatable-float()

package/source/css/_plugins/index.styl

@@ -2,29 +2,11 @@
 @import 'aplayer'
 
 // 根据主题配置加载
-if hexo-config('plugins.swiper.enable')
-  @import 'swiper'
 if hexo-config('plugins.scrollreveal.enable')
   @import 'scrollreveal'
-if hexo-config('plugins.fancybox.enable')
-  @import 'fancybox'
-if hexo-config('plugins.mermaid.style_optimization')
-  @import 'mermaid'
 if hexo-config('plugins.copycode.enable')
   @import 'copycode'
 if hexo-config('plugins.tianli_gpt.enable')
   @import 'tianli_gpt'
 if hexo-config('plugins.katex.enable')
   @import 'katex'
-
-// 评论
-if hexo-config('comments.service') == 'beaudar' or index(hexo-config('comments.custom_css'), 'beaudar') >= 0
-  @import 'comments/beaudar'
-if hexo-config('comments.service') == 'twikoo' or index(hexo-config('comments.custom_css'), 'twikoo') >= 0
-  @import 'comments/twikoo'
-if hexo-config('comments.service') == 'utterances' or index(hexo-config('comments.custom_css'), 'utterances') >= 0
-  @import 'comments/utterances'
-if hexo-config('comments.service') == 'waline' or index(hexo-config('comments.custom_css'), 'waline') >= 0
-  @import 'comments/waline'
-if hexo-config('comments.service') == 'artalk' or index(hexo-config('comments.custom_css'), 'artalk') >= 0
-  @import 'comments/artalk'

package/source/css/_plugins/lazyload.styl

@@ -10,6 +10,7 @@ img:not([src])
 
 .lazy-box
   position: relative
+  display: block
   overflow: hidden
   line-height: 0
   &.async // 通过 data-service 异步创建的懒加载元素，没办法知道宽高

package/source/css/{_plugins/comments → comments}/artalk.styl

@@ -1,3 +1,7 @@
+@import '../_defines/const'
+@import '../_custom'
+@import '../_defines/func'
+
 .cmt-body.artalk .artalk
   margin-top: 1rem
   .atk-editor-plug-preview

package/source/css/{_plugins/comments → comments}/twikoo.styl

@@ -1,3 +1,7 @@
+@import '../_defines/const'
+@import '../_custom'
+@import '../_defines/func'
+
 .cmt-body.twikoo
   --twikoo-theme: var(--theme)
   margin-top: 1.5rem

package/source/css/{_plugins → plugins}/mermaid.styl

@@ -1,3 +1,6 @@
+@import '../_defines/const'
+@import '../_custom'
+
 pre.mermaid
   display: flex;
   align-items: center;