hexo-theme-stellar 1.44.0 → 2.0.0-rc.2

package/source/css/_components/partial/listing-nav.styl

@@ -0,0 +1,68 @@
+.listing-nav
+  z-index: 8
+  top: var(--gap-page)
+  position: sticky
+  position: -webkit-sticky
+
+// Topbar 已承载当前 Appearance 表面；Listing Nav pinned 后在其内容区垂直居中并只保留导航内容。
+.site-shell[data-regions~='topbar'] .listing-nav
+  top: calc(var(--shell-topbar-top) + var(--shell-topbar-content-inset))
+  z-index: 13
+
+// 吸顶后仅导航内容接收事件，空白区域穿透到下层 Topbar。
+.site-shell[data-regions~='topbar'] .listing-nav:has(> .listing-nav__surface.is-pinned)
+  pointer-events: none
+  nav
+    pointer-events: auto
+
+.site-shell[data-regions~='topbar'] .listing-nav .listing-nav__surface.is-pinned
+  transform: translateY(var(--shell-topbar-content-center-offset)) translateY(-50%)
+  border: 0
+  background: transparent
+  box-shadow: none
+  text-shadow: none
+  backdrop-filter: none
+  -webkit-backdrop-filter: none
+  &:before,
+  &:after
+    display: none
+  nav a
+    filter: none
+
+.listing-nav__surface
+  margin: 0 1rem
+  position: relative
+  border-radius: $border-bar-container
+  corner-shape: $corner-shape
+  trans1: all
+
+.listing-nav__viewport
+  max-width: 100%
+  border-radius: $border-bar-container
+  overflow: scroll visible
+  scrollbar(0, 0)
+
+.listing-nav nav
+  display: inline-flex
+  font-size: $fs-14
+  gap: $bar-item-gap
+  padding: $bar-item-gap
+  z-index: 1
+  >p
+    margin: 0
+  a
+    bar-item()
+    &:hover
+      background: var(--bg-a50)
+    &.active, &:hover
+      color: var(--text)
+    &.active
+      bar-item-active()
+      cursor default
+      pointer-events: none
+    &.active:after
+      content: ''
+
+@media screen and (max-width: $device-mobile-max)
+  .listing-nav
+    top: 8pt

package/source/css/_components/partial/paginator.styl

@@ -12,7 +12,7 @@
   color: var(--text-p3)
   .page-number
     padding: 4px 8px
-    border-radius: 8px
+    border-radius: $border-button
     margin: 2px
   a.page-number
     color: var(--text-p3)

package/source/css/_components/pin-slider.styl

@@ -1,4 +1,4 @@
-// 置顶内容轮播（navbar top 上方通用置顶位）
+// 置顶内容轮播（Listing Nav 上方通用置顶位）
 .pin-slider
   position: relative
   margin: 0 1rem var(--gap-base)
@@ -38,12 +38,12 @@
     .pin-slide-bg
       transform: scale(var(--cover-zoom))
 
-// 文章幻灯片：固定「标题 + 一行小字」结构，宽高比与非置顶文章一致（article.cover_ratio）；
+// 文章幻灯片：固定「标题 + 一行小字」结构，宽高比与非置顶文章一致；
 // 文字区与 hero 卡片 cover-info 一致（同款渐变模糊层 + 四周间距）；无封面时为纯白卡片
 .pin-slide.post-slide
   display: block
   height: auto
-  aspect-ratio: hexo-config('article.cover_ratio')
+  aspect-ratio: hexo-config('article.listing.cover_ratio')
   .pin-slide-bg
     z-index: 0
   .pin-slide-text

package/source/css/_components/sidebar/brand.styl

@@ -0,0 +1,135 @@
+.brand-header
+  display: flex
+  flex-direction: column
+  gap: 16px
+
+.brand-wrap
+  display: flex
+  align-items: center
+  overflow: hidden
+  min-height: 48px
+
+  .brand-image
+    display: block
+    position: relative
+    width: 48px
+    height: 48px
+    margin-right: 1rem
+    flex-shrink: 0
+    background: transparent
+    color: inherit
+    img, svg
+      display: block
+      width: 100%
+      height: 100%
+
+  .brand-image--avatar
+    border-radius: 50%
+    corner-shape: round
+    overflow: hidden
+    img
+      border-radius: 50%
+      corner-shape: round
+      object-fit: cover
+
+  .brand-image--icon
+    app-icon()
+    img
+      object-fit: contain
+
+  .brand-image--plain
+    background: transparent
+    img
+      object-fit: contain
+
+  .brand-title
+    font-size: 1.5rem
+    font-weight: 900
+    color: inherit
+    line-height: 1.2
+    display: block
+    position: relative
+    .brand-name
+      color: var(--text)
+    .brand-tagline
+      color: var(--text-p1)
+      white-space: nowrap
+
+.site-region--leftbar .brand-title
+  min-width: 0
+  max-width: 100%
+  .brand-tagline
+    overflow: hidden
+    text-overflow: ellipsis
+
+.brand-header--regular
+  &:not(:has(> .brand-navigation)):not(:has(> .brand-search))
+    margin: var(--gap-base) 0
+  .brand-wrap
+    flex-direction: column
+    align-items: center
+    text-align: center
+    overflow: visible
+  .brand-image
+    width: 96px
+    height: 96px
+    margin: 0 0 1rem
+  .brand-title
+    width: 100%
+    .brand-tagline
+      margin-top: 4px
+  .brand-stats
+    width: 100%
+    margin-top: 1rem
+    display: grid
+    grid-template-columns: repeat(3, minmax(0, 1fr))
+    gap: 2px
+  .brand-stat
+    min-width: 0
+    padding: 8px 4px
+    display: flex
+    flex-direction: column
+    align-items: center
+    border-radius: $border-button
+    color: inherit
+  .brand-stat__value
+    min-height: 1.2em
+    line-height: 1.2
+    max-width: 100%
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
+    font-size: 1rem
+    font-weight: 700
+    color: var(--text-p1)
+  .brand-stat__label
+    font-size: $fs-12
+    font-weight: 500
+    color: var(--text-p3)
+
+.brand-header--topbar
+  .brand-wrap
+    min-height: 32px
+  .brand-image
+    width: 32px
+    height: 32px
+    margin-right: 8px
+  .brand-title
+    flex: 0 0 auto
+    font-size: 1rem
+    white-space: nowrap
+
+.brand-navigation__back
+  display: flex
+  width: fit-content
+  align-items: center
+  padding: 6px 16px 6px 12px
+  border-radius: 32px
+  color: var(--text-p2)
+  font-size: $fs-13
+  trans2 color background
+  .ui-icon
+    --ui-icon-size: 1em
+    margin-right: 0.25rem
+  &:hover
+    color: var(--text-p1)

package/source/css/_components/sidebar/footer.styl

@@ -1,4 +1,4 @@
-.l_left footer.footer
+.site-region--leftbar footer.footer
   margin: 0.5rem var(--gap-base) 1rem
 
 .social-wrap
@@ -13,23 +13,20 @@
     align-items: center
     box-sizing: border-box
     flex: 0 0 auto
+    width: 32px
     height: 32px
     padding: 4px
-    border-radius: 8px
+    border-radius: $border-button
     filter: grayscale(100%)
     overflow: hidden
-    background: var(--ui-item-bg)
-    box-shadow: none
-    img
-      flex: initial
-      width: 24px
-      height: 24px
-      object-fit: contain
-      border-radius: 2px
-    svg
-      flex: initial
-      height: 24px
-      width: 24px
+    .ui-icon
+      --ui-icon-size: 24px
+  button.social
+    border: 0
+    color: inherit
+    font: inherit
+    cursor: pointer
+    appearance: none
 
   .social-spacer
     flex: 1 1 0
@@ -43,9 +40,6 @@
     flex: 0 0 auto
     height: 32px
     line-height: 0
-    >.dropdown-trigger.social
-      >img, >svg
-        opacity: .5
     // JS 未加载时保留向上展开的原生 details 兜底；正常情况下菜单会移入全局浮层。
     >.dropdown-menu
       top: auto
@@ -58,20 +52,9 @@
       left: auto
       transform: none
 
-  .social:hover
-    background: var(--ui-item-bg-hover)
-    box-shadow: var(--ui-item-shadow-hover)
-
+  .social:hover,
+  .social:active,
+  .social:focus-visible,
   .social-dropdown[open] > .dropdown-trigger.social
-    background: var(--ui-item-bg-active)
-    box-shadow: var(--ui-item-shadow-active)
-
-  .social:hover, .social-dropdown[open] > .dropdown-trigger.social
     z-index: 1
     filter: unset
-    >img, >svg
-      opacity: 1
-    svg [fill="currentColor"]
-      fill: var(--item-grad)
-    svg [stroke="currentColor"]
-      stroke: var(--item-grad)

package/source/css/_components/sidebar/nav-area.styl

@@ -3,5 +3,9 @@
   .menu
     width: 100%
     margin: 0
+
+.nav-area,
+.widget-instance--menu
+  .menu
     .ui-collection__title
       font-size: $fs-15

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

@@ -26,12 +26,6 @@
       left: 1rem
       right: 1rem
       border-radius: $border-bar
-      background: var(--leftbar-search-line, var(--bg-a100))
-      :root[data-theme="dark"] &
-        background: var(--leftbar-search-line, var(--bg-a20))
-      :root:not([data-theme]) &
-        @media screen and (prefers-color-scheme: dark)
-          background: var(--leftbar-search-line, var(--bg-a20))
       z-index 0
       trans1 all
     &:after
@@ -42,7 +36,7 @@
       left: 1rem
       right: 1rem
       border-radius: $border-bar
-      background: convert(hexo-config('style.gradient.searchbar'))
+      background: convert(hexo-config('appearance.gradients.search_bar'))
       background-size: 200%
       animation: search-glow 20s linear infinite
       opacity: 0
@@ -81,21 +75,9 @@
     height: 1.5rem
     cursor: pointer
     svg
-      height: 1rem
-      width: 1rem
+      max-height: 1.5rem
       color: var(--text-p2)
       fill: currentColor
-      path[p-id="1562"]
-        color: var(--theme)
-    
-  &[searching='true']
-    .search-button
-      path[p-id="1562"]
-        color: $c-green
-  &.noresult[searching='true']
-    .search-button
-      path[p-id="1562"]
-        color: $c-red
 
   .search-no-result
     display: none
@@ -108,7 +90,7 @@
     border-radius: $border-card-s
 
 
-  #search-result
+  .search-result
     max-height: 60vh
     overflow: auto
     scrollbar-width: none
@@ -124,11 +106,11 @@
       list-style-type: none
     li a
       display: block
-      background: var(--ui-adapter-bg-hover)
-      box-shadow: var(--ui-adapter-shadow-hover)
       line-height: 1.2
       padding: 0.75rem 1rem
       border-radius: $border-card-s
+      background: var(--block)
+      box-shadow: none
       &:focus-visible
         outline: 2px solid var(--theme)
         outline-offset: 2px
@@ -183,17 +165,17 @@
     display: block
     margin-bottom: 8px
 
-.leftbar-container > .search-wrapper
+.site-region__viewport > .search-wrapper
   width: auto
   margin: 1.5rem var(--gap-base) 0
   padding-bottom: 0
 
-.leftbar-container > .search-wrapper[searching='true']
+.site-region__viewport > .search-wrapper[searching='true']
   flex-grow: 1
   min-height: 0
   display: flex
   flex-direction: column
-  #search-result
+  .search-result
     flex-grow: 1
     max-height: none
 
@@ -202,3 +184,171 @@
     background-position: 0%
   to
     background-position: 1000%
+
+.search-trigger
+  appearance: none
+  width: 100%
+  border: 0
+  font: inherit
+  text-align: start
+  cursor: pointer
+
+.search-shortcut
+  display: none
+  flex-shrink: 0
+  min-width: 0
+  border-radius: 4px
+  color: var(--text-p3)
+  opacity: 0.5
+  font-family: $ff-body
+  font-size: $fs-12
+  font-weight: 600
+  line-height: 1
+
+@media screen and (min-width: ($device-tablet + 1px))
+  .search-shortcut:not(:empty)
+    display: inline-flex
+
+html[data-leftbar-state='collapsed'] .site-shell:not([data-drawer='leftbar']) .site-region--leftbar .search-shortcut
+  display: none
+
+.search-dialog
+  box-sizing: border-box
+  width: unquote('min(600px, calc(100dvw - 64px))')
+  height: unquote('min(80dvh, 720px)')
+  max-width: none
+  max-height: unquote('min(80dvh, 720px)')
+  margin: auto
+  padding: 0
+  border: 1px solid var(--block-border)
+  border-radius: $border-card-l
+  color: var(--text)
+  background: var(--card)
+  box-shadow: $boxshadow-card-float
+  overflow: hidden
+  &::backdrop
+    background: rgba(black, .38)
+    backdrop-filter: blur(8px)
+    -webkit-backdrop-filter: blur(8px)
+
+.search-dialog__panel
+  box-sizing: border-box
+  width: 100%
+  height: 100%
+  display: flex
+  flex-direction: column
+  padding: 12px
+
+.search-dialog__header
+  display: flex
+  flex-wrap: nowrap
+  align-items: center
+  gap: 8px
+  .search-form
+    flex: 1 1 auto
+    box-sizing: border-box
+    min-width: 0
+    height: 40px
+    display: flex
+    flex-flow: row nowrap
+    align-items: center
+    gap: 8px
+    padding: 0 16px
+    position: static
+    border-radius: $border-card-s
+    color: var(--text)
+    background: var(--block)
+    &:hover
+      background: var(--block-border)
+    .search-input
+      flex: 1 1 auto
+      min-width: 0
+      width: auto
+      height: 100%
+      padding: 0
+    &:before
+      display: none
+
+.search-dialog__scope
+  display: flex
+  flex: 0 0 auto
+  align-items: center
+  gap: .5rem
+  padding: .5rem 0
+  overflow: hidden
+  color: var(--text-p2)
+  font-size: $fs-13
+  &[hidden]
+    display: none
+
+.search-dialog__scope-option
+  display: flex
+  flex: 0 0 auto
+  align-items: center
+  min-width: 0
+  gap: 5px
+  cursor: pointer
+  background: var(--block)
+  padding: .5rem 1rem
+  border-radius: $border-button
+  &:hover
+    background: var(--block-border)
+  &[hidden]
+    display: none
+  &[data-search-scope-option='current']
+    flex: 0 1 auto
+    overflow: hidden
+    > span:last-child
+      overflow: hidden
+      white-space: nowrap
+      text-overflow: ellipsis
+.search-dialog__close
+  flex: 0 0 40px
+  width: 40px
+  height: 40px
+  border: 0
+  border-radius: $border-bar
+  color: var(--text-p2)
+  background: var(--block)
+  &:hover
+    background: var(--block-border)
+  font-size: 24px
+  cursor: pointer
+
+.search-dialog__title
+  position: absolute
+  width: 1px
+  height: 1px
+  padding: 0
+  margin: -1px
+  overflow: hidden
+  clip: rect(0, 0, 0, 0)
+  white-space: nowrap
+  border: 0
+
+.search-dialog .search-result
+  flex: 1 1 auto
+  min-height: 0
+  max-height: none
+
+html[data-search-open]
+  overflow: hidden
+
+@media screen and (max-width: $device-tablet)
+  .search-dialog
+    width: 100dvw
+    height: 100dvh
+    max-height: none
+    border: 0
+    border-radius: 0
+  .search-dialog__panel
+    height: 100%
+    padding: unquote('max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left))')
+  .search-dialog .search-result
+    max-height: none
+
+@media (prefers-reduced-motion: reduce)
+  .search-dialog,
+  .search-dialog::backdrop
+    animation: none
+    transition: none