hexo-theme-stellar 1.24.1 → 1.26.0

package/source/css/_layout/sidebar/search.styl

@@ -0,0 +1,106 @@
+
+.search-wrapper
+  width: 100%
+  >.search-form
+    position: sticky
+    margin-bottom: 8px
+    top: 1rem
+    height: 40px
+    display: flex
+    flex-direction: row
+    align-items: center
+    transition: 0.38s ease-out
+    z-index: 0
+    border-radius: $border-bar
+    color: var(--text-p0)
+    background: var(--alpha50)
+    &:has(input:focus)
+      background: var(--alpha100)
+  .search-input
+    width: 100%
+    line-height: 16px
+    box-sizing: border-box
+    font-family: $ff-body
+    font-size: $fs-13
+    padding: 12px 0
+    color: var(--text-p0)
+  .search-button 
+    border-radius: $border-bar
+    line-height: 40px
+  .search-icon
+    width: 44px
+    margin-left: 4px
+    color: var(--text-p2)
+    margin-bottom: 2px
+    path[p-id="1562"]
+      color: $color-theme
+    
+  &[searching='true']
+    .search-icon
+      path[p-id="1562"]
+        color: $c-green
+  &.noresult[searching='true']
+    .search-icon
+      path[p-id="1562"]
+        color: $c-red
+
+  .search-no-result
+    display: none
+    color: var(--text-p1)
+    text-align: center
+    font-size: $fs-14
+    padding: 2rem
+    background: var(--alpha20)
+    border-radius: $border-card
+
+
+  #search-result
+    max-height: 60vh
+    overflow: scroll
+    scrollbar-width: none
+    scrollbar(0, 0)
+    border-radius: $border-card
+    &:empty
+      display: none
+    .search-result-list
+      padding: 0
+      margin: 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)
+    li+li
+        margin-top: 8px
+    .search-result-title
+      color: var(--text-p1)
+      font-weight: 700
+
+    .search-result-content
+      overflow: hidden
+      color: var(--text-p3)
+      margin: 4px 0 0
+      max-height: 13em
+      text-align: justify
+      font-size: $fs-12
+      display: -webkit-box
+      -webkit-box-orient: vertical
+      overflow: hidden
+      -webkit-line-clamp: 2
+
+    .search-keyword
+      color: $c-red
+      border-bottom: 1px dashed $c-red
+      font-weight: bold
+      filter grayscale(25%)
+
+
+.search-wrapper.noresult[searching='true']
+  .search-no-result
+    display: block
+    margin-bottom: 8px

package/source/css/_layout/sidebar/sidebar.styl

@@ -1,39 +1,29 @@
 .l_left
-  display: flex
-  flex-direction: column
-  word-break: break-all
-  text-align: justify
-  height: 100vh
+  margin: 8px
+  height: 'calc(%s - 16px)' % 100vh
+  border-radius: $border-card
+  overflow: hidden
   .header
     margin: var(--gap-l) var(--gap-l) 0
     margin-top: "calc(2 * %s)" % var(--gap-l)
   @media screen and (min-width: $device-mobile-max)
     >.widgets:first-child>.widget-wrapper:first-child
       margin-top: "calc(2 * %s)" % var(--gap-l)
-  @media screen and (max-width: $device-mobile-max)
-    height: 100vh
   
-
-.l_left[layout=wiki]
-  padding-bottom: 0
-  height: 100vh
-  @media screen and (max-width: $device-mobile-max)
-    height: 100vh
-  .widgets >:last-child
-    margin-bottom: 6rem
-
-
-.l_left .widgets .widget-wrapper.logo-wrap.wiki .widget-body
-  display: flex
-  margin-bottom: 1.5rem
-  flex-direction: column
-  align-items: flex-start
-  a.wiki-home
-    margin-bottom: 0.5rem
-    color: var(--text-p1)
-    svg
-      margin-right: 2px
-    &:hover
-      color: $color-hover
-      filter: unset !important
-
+.l_left
+  background-size: cover
+  if hexo-config('style.sidebar.background')
+    background-image: convert(hexo-config('style.sidebar.background'))
+  .sidebar-container
+    height: 100%
+    display: flex
+    flex-direction: column
+    word-break: break-all
+    text-align: justify
+  .sidebar-blur
+    --blur-px: 100px
+    --blur-bg: var(--sidebar-bg)
+    @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
+      background: var(--blur-bg)
+      backdrop-filter: saturate(240%) blur(var(--blur-px))
+      -webkit-backdrop-filter: saturate(240%) blur(var(--blur-px))

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

@@ -111,11 +111,13 @@
     img.bg
      transform: scale(1.01)
 
-.l_main.list .tag-plugin.banner
-  background: var(--block-hover)
-  .content .top
-    margin-top: 1.5rem
-  margin: 0 1rem
-  @media screen and (max-width: $device-mobile)
-    margin: 0
+.tag-plugin.banner .navbar a.active
+  blur-effect()
+
+
+.tag-plugin.banner.author
+  @media screen and (min-width: $device-mobile-max)
+    margin-left: var(--gap-l)
+    margin-right: var(--gap-l)
+  @media screen and (max-width: $device-mobile-max)
     border-radius: 0

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

@@ -27,7 +27,7 @@
       margin-top: 19px
       margin-bottom: 20px
     .frame
-      background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/frame/iphone11.svg);
+      background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.12/frame/iphone11.svg);
       width: 329px
       height: 658px
   &[focus='top']

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

@@ -2,7 +2,6 @@
   position: relative
   border-radius: $border-block
   background: var(--theme-block)
-  border: 1px solid var(--theme-border)
   if hexo-config('tag_plugins.okr.border') == true
     border: 1px solid var(--theme-border)
   overflow: hidden

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

@@ -82,7 +82,7 @@
   .tab-content:has(.grid-box)
     width: 100%
 
-.md-text.indent .tag-plugin.tabs .tab-content p:not([class])
-  text-indent: 'calc(%s * 2)' % $fs-p
+.l_body[text-indent] .md-text .tag-plugin.tabs .tab-content p:not([class])
+  text-indent: 'calc(%s * 2)' % var(--fs-p)
   a
     text-indent: 0

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

@@ -1,7 +1,7 @@
 details.toc
   background: var(--block)
   border: 1px solid var(--block-border)
-  border-radius: $border-bar
+  border-radius: $border-card
   overflow: hidden
   color: var(--text-p2)
   summary

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

@@ -0,0 +1,49 @@
+.widget-body .linklist
+  display: grid
+  grid-gap: 8px
+
+.linklist .link
+  border-radius: $border-bar
+  color: var(--text-p2)
+  min-height: 32px
+  padding: 0 4px
+  trans1 background
+  display: flex
+  justify-content: center
+  align-items: center
+  txt-ellipsis()
+  &.active
+    background: var(--alpha50)
+    svg,img
+      filter: unset
+
+.linklist .link span
+  padding: 0 4px
+  txt-ellipsis()
+.linklist .link svg, .linklist .link img
+  $size = 16px
+  padding: 0 2px
+  &:not([class='active-icon'])
+    color: $color-theme
+  max-height: 18px
+  width: auto
+  filter: grayscale(100%) brightness(0.8) opacity(0.8)
+  trans1 filter
+  flex-shrink: 0
+
+.widget-body .linklist.left
+  grid-gap: 2px
+.linklist.left .link
+  justify-content: space-between
+  padding: 0 16px
+  img,svg 
+    width: 1em
+    height: 1em
+    transform: scale(1.2)
+  span 
+    padding: 0 8px
+
+.linklist .link:hover
+  background: var(--alpha100)
+  svg  
+    filter: unset

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

@@ -6,7 +6,6 @@
     background: var(--card)
     border-radius: $border-block
     box-shadow: $boxshadow-card
-    hover-float()
     >div+div
       margin-top: 0.5rem
     span

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

@@ -48,29 +48,6 @@
     &:hover
       background: $color-hover
 
-  .menu 
-    margin-bottom: 0
-    background: none
-    border: 0
-    a
-      margin: 0
-      &.active 
-        box-shadow: none
-        position: relative
-        background: none
-        &:after
-          content: ''
-          position: absolute
-          height: 3px
-          bottom: 0
-          width: 32px
-          left: 'calc(50% - 0.5 * %s)' % @width
-          border-radius: 4px
-          background: $color-theme
-      &:hover 
-        box-shadow: none 
-        background: var(--block)
-
   .buttons
     margin: 1rem 0
     align-self: stretch

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

@@ -0,0 +1,28 @@
+.widget-wrapper.post-list .widget-body
+  margin-top: 0.25rem
+  a
+    line-height: 1
+    font-size: $fs-14
+    padding: 8px 16px
+    display: block
+    border-radius: $border-bar
+    color: var(--text-p1)
+    trans1 background
+    &.active
+      background: var(--alpha50)
+    &:hover
+      background: var(--alpha100)
+  a+a
+    margin-top: 2px
+  a  
+    display: flex
+    justify-content: space-between
+    align-items: center
+    .title
+      txt-ellipsis()
+    svg
+      flex-shrink: 0
+      height: 1em
+      width: auto
+      transform: scale(1.2)
+    

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

@@ -0,0 +1,20 @@
+.widget-wrapper.markdown
+  .widget-body
+    border-radius: $border-card
+    padding: 4px 16px
+    background: var(--alpha50)
+
+    a:not([class])
+      trans1 all
+      border-bottom: 1px solid var(--text-p0)
+      color: var(--text-p0)
+      &:hover
+        color: $color-hover
+        border-bottom: 1px solid $color-hover
+
+.widget-wrapper.markdown .linklist
+  margin: 1em 0
+  .link
+    background: var(--alpha50)
+  .link:hover
+    background: var(--alpha100)

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

@@ -1,8 +1,39 @@
-.widget-wrapper.related .widget-body a
-  margin-top: 0.5rem
-  margin-bottom: 1rem
-  .title 
+
+.widget-wrapper.post-card .widget-body
+  max-width: 100%
+  margin: 1rem 0
+  .item+.item
+    margin-top: 8px
+  .item
+    line-height: 1.2
+    background: var(--alpha20)
+    padding: 10px 16px
+    border-radius: $border-card
+    display: block
+    border-left: 0
+    box-sizing: border-box
+  .title
+    color: var(--text-p1)
+    font-weight: 500
+    font-size: 1rem
+    display: -webkit-box
+    -webkit-box-orient: vertical
+    overflow: hidden
+    -webkit-line-clamp: 1
     font-weight: 700
     font-size: $fs-14
   .excerpt
-    -webkit-line-clamp: 3
+    color: var(--text-p3)
+    font-size: $fs-12
+    margin-top: 0.5rem
+    display: -webkit-box
+    -webkit-box-orient: vertical
+    overflow: hidden
+    -webkit-line-clamp: 2
+  
+  .item
+    trans1 background
+  .item.active
+    background: var(--alpha50)
+  .item:hover
+    background: var(--alpha50)

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

@@ -3,10 +3,10 @@
     margin-top: 0.5rem
   .tag-plugin.timeline .timenode
     .header
-      margin-bottom: 0.5rem
+      margin: 0.5rem 16px
       txt-ellipsis()
       .user-info
-        background: var(--block)
+        background: var(--alpha50)
         &:hover
           background: $color-hover
           color: var(--card)
@@ -14,4 +14,23 @@
         display: none
     &+.timenode
       margin-top: 0.75rem
+    .header p
+      color: var(--text-p2)
+    .body
+      border-radius: $border-card
+      background: var(--alpha50)
+      box-shadow: none
+
+      a
+        trans1 all
+        border-bottom: 1px solid var(--text-p0)
+        color: var(--text-p1)
+        &:hover
+          color: $color-hover
+          border-bottom: 1px solid $color-hover
+      code 
+        background: none
+        padding: 0
+        margin: 0
+      
       

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

@@ -1,3 +1,3 @@
 .widget-wrapper.toc.single .doc-tree
   &.active>.toc
-    border-left: 2px solid var(--block-hover)
+    border-left: 2px solid var(--alpha50)

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

@@ -1,12 +1,12 @@
-.widget-wrapper.toc .widget-header
-  margin-top: 1rem
 
 .widget-wrapper.toc.single .widget-header
   font-weight: 500
   font-size: $fs-12
-  >span
-    margin: 0.5rem 0
 
+.toc-item
+  margin-top: 2px
+.toc-child
+  margin-top: 2px
 .widget-wrapper.toc .widget-body
   margin-top: 0
   ul ul, ul ol
@@ -14,8 +14,6 @@
   ol ul, ol ol
     padding-left: 0
 
-  .doc-tree
-    margin: 4px 0
   .toc
     padding: 0
     margin: 0
@@ -43,7 +41,7 @@
   padding: 0
   list-style: none
   &.active
-    color: $color-theme
+    background: var(--alpha50)
     border-left-color: @color
   .toc-child .toc-item
     padding: 0
@@ -51,8 +49,9 @@
   color: inherit
   display: block
   line-height: 1.2
-  border-radius: 4px
+  border-radius: $border-bar
   position: relative
+  trans1 background
   &:before
     content: ''
     position: absolute
@@ -61,14 +60,15 @@
     bottom: 'calc(50% - %s)' % 6px
     width: 2px
     border-radius: 2px
-    background: $color-theme
+    background: var(--text-p0)
     visibility: hidden
-  &:hover
-    background: var(--block-hover)
   &.active
-    color: $color-theme !important
+    background: var(--alpha50)
     &:before
       visibility: visible
+  &:hover
+    background: var(--alpha100)
+  
   
 // 始终折叠
 .widget-wrapper.toc[collapse='true']

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

@@ -1,48 +1,61 @@
-.widget-wrapper.toc.multi .widget-header
-  color: var(--text-p1)
-  font-size: $fs-14
+.doc-tree+.doc-tree
+  margin-top: 2px
 
+.widget-wrapper.toc.multi
+  // .widget-header
+  //   color: $color-theme
+  //   filter: brightness(75%)
+  .widget-body+.widget-header
+    margin-top: 28px
 
 // 其它分页链接
 .widget-wrapper.toc.multi .doc-tree
-  border-radius: $border-bar
-  background: var(--block)
+  border-radius: $border-card
   overflow: hidden
-  border: 1px solid var(--block-border)
   a.doc-tree-link
-    color: var(--text-p2)
-    padding: 0.5rem
-    display: block
-    font-size: $fs-12
-    font-weight: 500
+    color: var(--text-p1)
+    padding: 0 16px
+    display: flex
+    min-height: 32px
+    justify-content: space-between
+    align-items: center
+    font-size: $fs-14
     position: relative
+    trans1 background
+    .toc-text
+      txt-ellipsis()
+    svg,img
+      flex-shrink: 0
+      width: 1em
+      height: 1em
+      transform: scale(1.2)
     &:after
       position: absolute
       right: .5rem
-    &.active
-      color: var(--text-p1)
-      &:only-child
-        background: var(--card)
+    &:only-child
+      &.active
+        background: var(--alpha50)
+      &:hover
+        background: var(--alpha100)
     &:hover
-      background: var(--block-hover)
-      &:after
-        content: '+'
+      background: var(--alpha100)
 
 
 // 当前分页链接
 .widget-wrapper.toc.multi .doc-tree.active
   a.doc-tree-link
-    background: var(--block)
-    font-weight: 700
-    &:not(:only-child)
-      border-bottom: 1px solid var(--block-border)
+    background: var(--alpha100)
+    font-weight: 500
     &:hover:after
       content: none
   >.toc
-    padding: 4px
-    background: var(--card)
+    padding: 4px 10px
+    border: 1px solid var(--alpha50)
+    background: var(--alpha20)
+    border-bottom-left-radius: $border-card
+    border-bottom-right-radius: $border-card
     a.toc-link:before
       left: -2px
       width: 4px
     a.toc-link:hover
-      background: var(--block)
+      background: var(--alpha100)

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

@@ -1,6 +1,7 @@
 .widgets 
   .loading-wrap
     margin: 0.5rem 0
+    background: var(--alpha50)
 
 .widgets
   overflow: scroll
@@ -9,6 +10,7 @@
   scrollbar(0, 0)
   z-index: 1
   line-height: 1.2
+  margin: 0 var(--gap-l)
   .widget-wrapper
     .widget-header
       padding-left: var(--gap-l)
@@ -16,33 +18,39 @@
       display: flex
       justify-content: space-between
       align-items: center
+      line-height: 28px
       font-weight: 500
-      position: sticky
-      top: -2px
-      background: var(--site-bg)
-      padding-top: 2px
-      z-index 1
+      font-size: $fs-12
+      color: var(--text-p1)
       .item 
         display: block
-      >span 
-        margin: 0.25rem 0
+      >span
         text-align: left
+        opacity 0.6
       &:empty
         display: none
       .cap-action
-        hover-block 4px 4px
         line-height: 0
-        color: var(--text-meta)
-        trans2: color background
-        .icon
-          fill: var(--text-meta)
+        color: inherit
+        opacity 0.6
+        trans2: opacity background
+        border-radius: 4px
+        padding: 6px
+        margin-right: -5px
+        svg
+          height: 1em
+          width: auto
+          transform: scale(1.2)
+          fill: var(--text-p2)
         &:hover
           color: $color-hover
-          .icon
+          background: var(--alpha100)
+          opacity 1
+          svg
             fill: $color-hover
 
     .widget-body
-      margin: 0.5rem var(--gap-l)
+      margin: 0.5rem 0
       color: var(--text-p1)
       p
         margin-top: .5em
@@ -50,11 +58,8 @@
         line-height: 1.5
     .widget-header+.widget-body
       margin-top: 0
-  .widget-wrapper+.widget-wrapper .widget-header
-    margin-top: 3rem
-  .widget-wrapper+.widget-wrapper.toc .widget-header
-    margin-top: 1rem
+
 
 .widget-wrapper
-    display: block
-    margin: 2rem 0
+  display: block
+  margin: 32px 0