hexo-theme-stellar 1.26.7 → 1.27.0

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

@@ -1,22 +1,23 @@
-.widget-wrapper.ghuser
+.widget-wrapper.user-card
   .widget-header+.widget-body
     margin: 0.75rem 0
-.widget-wrapper.ghuser .widget-body
+.widget-wrapper.user-card .widget-body
   text-align: center
   background: var(--card)
   border-radius: $border-card
   padding: 1rem
   box-shadow: $boxshadow-card
 
-.widgets .widget-wrapper.ghuser 
+.widgets .widget-wrapper.user-card 
   .avatar
     display: block
     border-radius: 100%
     margin: 1rem auto 1.25rem auto
-    max-width: 75%
+    max-width: 128px
     overflow: hidden
-    img 
+    img
       display: block
+      aspect-ratio: 1
     @media screen and (max-width: $device-tablet)
       max-width: 50%
 
@@ -32,6 +33,7 @@
   .follow 
     font-weight: 500
     border-radius: 64px
+    margin: 1rem 0 0
     padding: 0.5rem 1rem
     background: $color-theme
     color: var(--card)
@@ -45,6 +47,8 @@
     trans1: background
     svg
       margin-right: 6px
+      height: 1.5em
+      width: auto
     &:hover
       background: $color-hover
 

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

@@ -1,5 +1,4 @@
 .widget-wrapper.post-list .widget-body
-  margin-top: 0.25rem
   a
     line-height: 1
     font-size: $fs-14
@@ -25,4 +24,7 @@
       height: 1em
       width: auto
       transform: scale(1.2)
-    
+
+.widget-wrapper.post-list
+  .widget-body+.widget-header
+    margin-top: 28px

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

@@ -1,7 +1,6 @@
 
 .widget-wrapper.post-card .widget-body
   max-width: 100%
-  margin: 1rem 0
   .item+.item
     margin-top: 8px
   .item

package/source/css/_layout/widgets/timeline.styl

@@ -1,34 +1,31 @@
-.widget-wrapper.timeline 
+.widget-wrapper.timeline
+  .tag-plugin.timeline
+    padding-left: 0
+    &:before
+      left: 6px
   .widget-body
-    margin-top: 0.5rem
+    overflow hidden
   .body
     a
       trans1 all
-      border-bottom: 1px solid var(--text)
-      color: var(--text-p1)
+      word-break: break-all
       --fsp: $fsp2
-      &:hover
-        color: $color-hover
-        border-bottom: 1px solid $color-hover
   .tag-plugin.timeline .timenode
+    z-index 1
+    margin-top: 0.25rem
     .header
-      margin: 0.5rem 16px
-      txt-ellipsis()
+      margin: 0.25rem var(--gap-padding)
       .user-info
-        background: var(--alpha50)
-        &:hover
-          background: $color-hover
-          color: var(--card)
-      &:before
+        background: none
+        padding-right: 0
+      img
         display: none
-    &+.timenode
-      margin-top: 0.75rem
-    .header p
-      color: var(--text-p2)
+
+    .header:before
+      left: calc(6px - var(--gap-padding))
     .body
       border-radius: $border-card
-      background: var(--alpha50)
-      box-shadow: none
+      padding: 0.5rem 1rem
       p,li
         --fsp: $fsp3
       code 
@@ -40,4 +37,13 @@
       
       
   .tag-plugin.timeline[api] .body .footer
-    background: none
+    background: none
+
+.l_left .widget-wrapper.timeline
+  .tag-plugin.timeline
+    padding-left: 0
+    &:before
+      content: none
+.l_left .widget-wrapper.timeline .body
+  box-shadow: none
+  background: var(--alpha50)

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

@@ -0,0 +1,182 @@
+.widget-wrapper.toc
+  background: var(--site-bg)
+  z-index 3
+  .widget-body
+    position relative
+    &:before
+      content: ''
+      position absolute
+      top: 6px
+      bottom: 6px
+      left: 0
+      width: 4px
+      background: var(--block)
+      border-radius: 4px
+
+// 目录基本样式
+.widget-wrapper.toc .toc
+  --fsp: $fsp2
+  padding: 0
+  margin: 0
+  position relative
+  list-style: none
+  li
+    margin: 0
+    list-style: none
+  a
+    --padding: calc(var(--gap-padding) / 2)
+    --padding-offset: calc(0 - var(--padding))
+    padding: 6px var(--padding)
+    margin: 0 var(--padding)
+    color: var(--text-p3)
+    display: block
+    position relative
+    border-radius: $border-bar
+    trans1 all
+    &.active:before
+      content: ''
+      position absolute
+      top: 6px
+      bottom: 6px
+      left: -8px
+      width: 4px
+      background: $color-theme
+      border-radius: 4px
+    &:hover
+      background: var(--block-hover)
+      color: var(--text)
+    
+// 固定位置
+.l_right .widgets .widget-wrapper.toc
+  margin-top: 0
+  position: sticky
+  position: -webkit-sticky
+  top: 0
+  padding: 16px 0
+  &:first-child
+    top: 8px
+    padding-top: 8px
+  .widget-body .toc
+    max-height: 70vh
+    @media screen and (max-width: $device-laptop)
+      max-height: unset
+    overflow: auto
+    scrollbar(0, 0)
+
+
+
+// 各级缩进样式
+.widget-wrapper.toc .toc
+  .toc-item
+    font-weight: 500
+    --fsp: $fsp1
+  .toc-item .toc-item
+    font-weight: 400
+    --fsp: $fsp2
+  ol
+    padding-left: 0
+  .toc-child .toc-link
+    padding-left: 1.5rem
+  .toc-child .toc-child .toc-link
+    padding-left: 2.5rem
+  .toc-child .toc-child .toc-child .toc-link
+    padding-left: 3.5rem
+  .toc-child .toc-child .toc-child .toc-child .toc-link
+    padding-left: 4.5rem
+  .toc-child .toc-child .toc-child .toc-child .toc-child .toc-link
+    padding-left: 5rem
+
+// 高亮样式
+.widget-wrapper.toc .toc a.toc-link.active
+  color: var(--text)
+  &:before,&:after
+    content: ''
+
+// 始终折叠
+.widget-wrapper.toc[collapse='true']
+  .toc-item a.toc-link+ol
+    display: none
+  // 激活上级目录时显示子目录
+  .toc a.toc-link.active+ol
+    display: block
+
+// 自动折叠
+.widget-wrapper.toc[collapse='auto']
+  .toc-item a.toc-link+ol
+    display: none
+  // 激活上级目录时显示子目录
+  .toc a.toc-link.active+ol
+    display: block
+  // 鼠标放上去时显示子目录
+  &:hover a.toc-link+ol
+    display: block
+
+// 子目录激活时显示
+.widget-wrapper.toc[collapse='true'] ol:has(> .toc-item a.active)
+  display: block
+.widget-wrapper.toc[collapse='auto'] ol:has(> .toc-item a.active)
+  display: block
+
+// 手动折叠
+.widget-wrapper.toc 
+  .widget-body
+    display: grid
+    grid-template-rows: 1fr
+    trans1 all
+    overflow hidden
+.l_right .widgets .widget-wrapper.toc .widget-header .cap-action:hover
+  background: var(--block-border)
+.l_right .widgets .widget-wrapper.toc.collapse
+  .widget-header .cap-action
+    background: var(--block-border)
+  .widget-body
+    grid-template-rows: 0fr
+
+// 编辑本文按钮
+.widget-wrapper.toc .widget-body+.widget-footer:before 
+  content: ''
+  position absolute
+  background: var(--block-border)
+  top: 0
+  height: 1px
+  left: var(--gap-padding)
+  right: var(--gap-padding)
+.widget-wrapper.toc .widget-footer
+  margin-top: 8px
+  color: var(--text-p2)
+  position relative
+  padding-top: 8px
+  a
+    display: flex
+    align-items: center
+    color: inherit
+    font-size: $fs-14
+    padding: 8px var(--gap-padding)
+    border-radius: $border-bar
+    trans1 all
+    svg,img
+      height: 16px
+      width: auto
+      margin-right: 8px
+  a:hover
+    background: var(--block-hover)
+    color: var(--text)
+
+.widget-wrapper.toc+.widget-wrapper
+  padding-top: 32px
+
+@media screen and (max-width: $device-laptop)
+  .l_right
+    blur-effect()
+    .widgets
+      .widget-wrapper.toc
+        position: static
+        background: none
+  .widget-wrapper.toc .toc
+    a
+      color: var(--text-p2)
+  .widget-wrapper.toc .widget-footer
+    a
+      background: var(--alpha100)
+    a+a
+      margin-top: 4px

package/source/css/_layout/widgets/widgets.styl

@@ -10,11 +10,11 @@
   scrollbar(0, 0)
   z-index: 1
   line-height: 1.2
-  margin: 0 var(--gap-l)
+  margin: 0 var(--gap-margin)
   .widget-wrapper
     .widget-header
-      padding-left: var(--gap-l)
-      padding-right: var(--gap-l)
+      padding-left: var(--gap-padding)
+      padding-right: var(--gap-padding)
       display: flex
       justify-content: space-between
       align-items: baseline
@@ -50,16 +50,35 @@
             fill: $color-hover
 
     .widget-body
-      margin: 0.5rem 0
       color: var(--text-p1)
       p
         margin-top: .5em
         margin-bottom: .5em
         line-height: 1.5
-    .widget-header+.widget-body
-      margin-top: 0
 
 
 .widget-wrapper
   display: block
-  margin: 32px 0
+  padding-bottom: 32px
+
+.l_left .widgets
+  .widget-wrapper
+    &:first-child
+      margin-top: 32px
+
+.l_right .widgets
+  &:empty 
+    display: none
+  .widget-wrapper
+    .widget-header
+      padding-left: var(--gap-padding)
+      padding-right: var(--gap-padding)
+  // 小屏幕
+  @media screen and (max-width: $device-laptop)
+    .widget-wrapper
+      margin-top: var(--gap-margin)
+      border-radius: $border-card
+  // 大屏幕
+  @media screen and (min-width: $device-laptop)
+    .widget-wrapper.markdown .widget-body
+      background: var(--block)

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

@@ -106,15 +106,15 @@
   .tk-comments-no
     color: var(--text-p1);
 
-set_darkmode_comments()
+_dark_comments()
   .cmt-body.twikoo
     --twikoo-lighttext: $color-link;
     --twikoo-secondtext: var(--text-p2);
     --twikoo-theme: $color-theme;
 
-if hexo-config('style.darkmode') == 'auto'
-  @media (prefers-color-scheme: dark)
-    set_darkmode_comments()
 
-if hexo-config('style.darkmode') == 'always'
-  set_darkmode_comments()
+if theme(dark)
+  _dark_comments()
+else if theme(auto)
+  @media (prefers-color-scheme: dark)
+    _dark_comments()

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

@@ -1,4 +1,4 @@
-.cmt-body.waline
+.cmt-body
   .wl-panel
     margin: 0.5em 0 !important
   .wl-meta-head
@@ -37,8 +37,8 @@
   --waline-avatar-radius: 50%;
   --waline-box-shadow: none;
   
-
-  @media (prefers-color-scheme: dark)
+.cmt-body.waline
+  ondark()
     --waline-white: #000;
     --waline-light-grey: #666;
     --waline-dark-grey: #999;
@@ -55,11 +55,14 @@
     /* 其他颜色 */
     --waline-info-bgcolor: #272727;
     --waline-info-color: #666;
+    .wl-count
+      padding: .375em;
+      font-weight: bold;
+      font-size: 1.25em;
+      color: #fff;
 
-.wl-count
-  @media (prefers-color-scheme: dark)
-    padding: .375em;
-    font-weight: bold;
-    font-size: 1.25em;
-    color: #fff;
-
+  if theme(dark)
+    ondark()
+  else if theme(auto)
+    @media (prefers-color-scheme: dark)
+      ondark()

package/source/css/_plugins/index.styl

@@ -16,6 +16,8 @@ if hexo-config('plugins.copycode.enable')
 if hexo-config('plugins.tianli_gpt.enable')
   @import 'tianli_gpt'
 
+if hexo-config('plugins.katex.enable')
+  @import 'katex'
 
 // 评论
 if hexo-config('comments.service') == 'beaudar'

package/source/css/_plugins/katex.styl

@@ -0,0 +1,5 @@
+.md-text 
+  p.katex-block
+  .katex-display
+    overflow: scroll
+    scrollbar(0, 0)

package/source/css/_plugins/mermaid.styl

@@ -1,18 +1,9 @@
 pre.mermaid
-  display: inline-block
-  width: 100%
-  text-align: center
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-family: $ff-body
 
-.mermaid svg 
-  width: 100%
-  display: inline-block
-
-
-.mermaid svg
-  width: 100%
-  display: inline-block
-
 .mermaid span,text
   font-family: $ff-body
 
@@ -23,103 +14,102 @@ pre.mermaid
 .mermaid rect.basic.label-container
   stroke: var(--block-border) !important
   fill: var(--block) !important
-  
-set_mermaid_darkmode()
-  .mermaid 
+
+_dark_mermaid()
+  .mermaid
     fill: #ccc !important
-  
 
-  .mermaid .error-icon 
+
+  .mermaid .error-icon
     fill: #a44141 !important
-  
 
-  .mermaid .error-text 
+
+  .mermaid .error-text
     fill: #ddd !important
     stroke: #ddd !important
-  
 
-  .mermaid .marker 
+
+  .mermaid .marker
     fill: lightgrey !important
     stroke: lightgrey !important
-  
 
-  .mermaid .marker.cross 
+
+  .mermaid .marker.cross
     stroke: lightgrey !important
-  
 
-  .mermaid .label 
+
+  .mermaid .label
     color: #ccc !important
-  
 
-  .mermaid .cluster-label text 
+
+  .mermaid .cluster-label text
     fill: #F9FFFE !important
-  
 
-  .mermaid .cluster-label span 
+
+  .mermaid .cluster-label span
     color: #F9FFFE !important
-  
+
 
   .mermaid .label text,
-  .mermaid span 
+  .mermaid span
     fill: #ccc !important
     color: #ccc !important
-  
+
 
   .mermaid .node rect,
   .mermaid .node circle,
   .mermaid .node ellipse,
   .mermaid .node polygon,
-  .mermaid .node path 
+  .mermaid .node path
     fill: #1f2020 !important
     stroke: #81B1DB !important
-  
 
-  .mermaid .arrowheadPath 
+
+  .mermaid .arrowheadPath
     fill: lightgrey !important
-  
 
-  .mermaid .edgePath .path 
+
+  .mermaid .edgePath .path
     stroke: lightgrey !important
-  
 
-  .mermaid .flowchart-link 
+
+  .mermaid .flowchart-link
     stroke: lightgrey !important
-  
 
-  .mermaid .edgeLabel 
+
+  .mermaid .edgeLabel
     background-color: hsl(0, 0%, 34.4117647059%) !important
-  
 
-  .mermaid .edgeLabel rect 
+
+  .mermaid .edgeLabel rect
     background-color: hsl(0, 0%, 34.4117647059%) !important
     fill: hsl(0, 0%, 34.4117647059%) !important
-  
 
-  .mermaid .cluster rect 
+
+  .mermaid .cluster rect
     fill: hsl(180, 1.5873015873%, 28.3529411765%) !important
     stroke: rgba(255, 255, 255, 0.25) !important
-  
 
-  .mermaid .cluster text 
+
+  .mermaid .cluster text
     fill: #F9FFFE !important
-  
 
-  .mermaid .cluster span 
+
+  .mermaid .cluster span
     color: #F9FFFE !important
-  
 
-  .mermaid div.mermaidTooltip 
+
+  .mermaid div.mermaidTooltip
     background: hsl(20, 1.5873015873%, 12.3529411765%) !important
     border: 1px solid rgba(255, 255, 255, 0.25) !important
-  
 
-  .mermaid .flowchartTitleText 
+
+  .mermaid .flowchartTitleText
     fill: #ccc
-  
 
-if hexo-config('style.darkmode') == 'auto'
-  @media (prefers-color-scheme: dark)
-    set_mermaid_darkmode()
 
-if hexo-config('style.darkmode') == 'always'
-  set_mermaid_darkmode()
+if theme(dark)
+  _dark_mermaid()
+else if theme(auto)
+  @media (prefers-color-scheme: dark)
+    _dark_mermaid()