hexo-theme-stellar 1.26.8 → 1.28.0

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

@@ -1,4 +1,4 @@
-.md-text .tag-plugin.timeline
+.tag-plugin.timeline
   position: relative
   padding-left: 16px
   &:before
@@ -16,7 +16,7 @@
     &:before
       display: none
 
-.md-text .tag-plugin.timeline .timenode
+.tag-plugin.timeline .timenode
   position: relative
   display: flex
   flex-direction: column
@@ -31,12 +31,8 @@
   &+.timenode
     margin-top: 1rem
   &:hover .header
-    p
+    span
       color: var(--text-p1)
-    .user-info
-      background: $color-theme
-      span
-        color: var(--card)
     &:before
       background: $color-theme
       height: 16px
@@ -49,17 +45,17 @@
   position: relative
   margin: 0.25rem 0
   font-size: $fs-13
+  a.user-info span
+    font-weight: 600
   .user-info 
     display: flex
     align-items: center
     font-size: $fs-13
     font-weight: 500
     color: var(--text-p1)
-    margin-right: 4px
+    margin-right: 8px
     line-height: 1
     border-radius: 16px
-    padding-right: 6px
-    trans2 color background
     img 
       background: white
       height: 16px
@@ -67,19 +63,10 @@
       display: inline
       margin: 0 4px 0 0
       object-fit: contain
-    &:hover
-      background: $color-hover
-  &,p  
+  &,span
     font-weight: 500
     color: var(--text-p3)
-    trans1 color
     line-height: 1
-  p
-    margin: 0 !important
-    font-size: $fs-13 !important
-    a
-      color: inherit
-      font-weight: inherit
   &:before
     content: ''
     position: absolute
@@ -112,11 +99,6 @@
     width: 240px
 
 .tag-plugin.timeline[api]
-  &.stellar-fcircle-api .timenode:hover .header
-    .user-info
-      background: inherit
-      span
-        color: inherit
   a.body
     display: block
     color: var(--text-p1)
@@ -139,7 +121,10 @@
       text-decoration: none
       border-bottom: 2px solid $color-theme
       trans1 all
+      background: none
       &:hover
+        background: none
+        border-radius: 0
         border-bottom: 2px solid $color-hover
   >p:first-child:not([class]) a:not([class])
     padding: 0
@@ -148,7 +133,10 @@
     text-decoration: none
     border-bottom: 2px solid $color-theme
     trans1 all
+    background: none
     &:hover
+      background: none
+      border-radius: 0
       border-bottom: 2px solid $color-hover
     
   
@@ -181,6 +169,8 @@
     flex-wrap: wrap
     font-size: $fs-13
     align-items: stretch
+  .left+.right
+    margin-left: 4px
 
 .tag-plugin.timeline[api] .body .footer
   .item
@@ -191,10 +181,18 @@
     padding: 0 0.5rem
     display: flex 
     align-items: center
+    border-color: $color-link
     &:first-child 
       margin-left: 0
     &:last-child 
       margin-right: 0
+  a.item
+    background: var(--block)
+    border-color: var(--block-border)
+    color: inherit
+    &:hover
+      background: var(--block-hover)
+      
   .reaction 
     border-color: var(--block)
 
@@ -222,14 +220,15 @@
     margin: 0.5rem 0
     line-height: 1.2
 
-.tag-plugin.timeline.stellar-memos-api .body
+.tag-plugin.timeline.ds-memos .body
   p:first-child 
     margin-top: 2px
   p:last-child
     margin-bottom: 2px
   img  
-    margin: 0
+    margin: .5rem 0
     max-height: 128px
+    cursor: zoom-in
   .tag-plugin.image
     display: flex
     .image-bg+.image-bg

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

@@ -5,7 +5,7 @@
     color: var(--text-p2)
     background: var(--card)
     border-radius: $border-card
-    box-shadow: $boxshadow-card
+    hoverable-card()
     >div+div
       margin-top: 0.5rem
     span

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,7 +1,5 @@
 .widget-wrapper.post-list .widget-body
-  margin-top: 0.25rem
   a
-    line-height: 1
     font-size: $fs-14
     padding: 8px 16px
     display: block
@@ -25,4 +23,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)