hexo-theme-stellar 1.42.1 → 1.43.1

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

@@ -16,7 +16,7 @@
   flex-direction: column
   justify-content: center
   align-items: center
-  font-size: var(--fsp)
+  font-size: var(--fs-content)
   .cover-title
     font-weight: 700
     font-size: 1.5rem
@@ -64,3 +64,282 @@
   .cover-title
     &:first-child
       font-size: 3rem
+
+
+.l_cover.wiki-hero
+  min-height: 640px
+  overflow: hidden
+  isolation: isolate
+  color: var(--text)
+  text-align: left
+  .wiki-cover-background
+    position: absolute
+    z-index: -1
+    inset: 0
+    overflow: hidden
+    background: var(--background)
+    &.image
+      .wiki-cover-background-image,
+      .wiki-cover-background-blur
+        position: absolute
+        inset: 0
+        width: 100%
+        height: 100%
+        object-fit: cover
+      .wiki-cover-background-image
+        z-index: 0
+      .wiki-cover-background-blur
+        z-index: 1
+        filter: blur(18px)
+        // 以透明度遮罩渐入模糊层；clip-path 会在 80% 处硬切，丢失过渡。
+        mask: linear-gradient(to top, black 0%, rgba(black, .75) 10%, transparent 20%)
+        -webkit-mask: linear-gradient(to top, black 0%, rgba(black, .75) 10%, transparent 20%)
+        transform: scale(1.03)
+      .wiki-cover-background-overlay
+        position: absolute
+        z-index: 2
+        inset: 0
+        pointer-events: none
+        background: linear-gradient(to bottom, transparent 0%, transparent 80%, var(--background) 100%)
+    &.galaxy
+      background: #000000
+      canvas
+        display: block
+        width: 100%
+        height: 100%
+        pointer-events: none
+  .wiki-navbar
+    position: absolute
+    top: 2rem
+    left: 0
+    right: 0
+  .wiki-cover-layout
+    width: calc(100% - 4rem)
+    max-width: 1120px
+    height: 100%
+    margin: 0 auto
+    position: relative
+    color: var(--text-banner, var(--text))
+  // 未配置背景时没有 data-text-adaptive，不会运行自适应取色。
+  .wiki-cover-layout:not([data-text-adaptive])
+    --text-banner-theme: var(--text-p2)
+    .wiki-cover-release,
+    .wiki-cover-actions a.button
+      border-color: var(--block-border)
+  .wiki-navbar-home
+    display: inline-flex
+    align-items: center
+    min-height: 1.5rem
+    padding: 0
+    border: 0
+    color: var(--text-banner, var(--text))
+    font-size: 1rem
+    font-weight: 700
+    line-height: 1.5rem
+    text-decoration: none
+    background: transparent
+    box-shadow: none
+    &:hover
+      color: var(--text-banner, var(--text))
+      background: transparent
+      opacity: .8
+  .wiki-cover-content
+    width: 100%
+    max-width: none
+    height: 100%
+    margin: 0
+    display: grid
+    grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr)
+    gap: clamp(3rem, 8vw, 8rem)
+    align-items: center
+  .wiki-cover-intro
+    max-width: 560px
+    display: flex
+    flex-direction: column
+    align-items: stretch
+    gap: 2rem
+  .wiki-cover-release
+    display: inline-flex
+    align-items: center
+    min-height: 1.75rem
+    align-self: flex-start
+    box-sizing: border-box
+    padding: .25rem .75rem
+    margin: 0
+    border: 1px solid unquote('color-mix(in srgb, var(--text-banner-theme, white) 50%, transparent)')
+    border-radius: 100px
+    color: inherit
+    font-size: $fs-12
+    font-weight: 700
+    line-height: 1.2
+    text-decoration: none
+    transition: opacity .25s ease
+    .wiki-cover-release-value
+      display: none
+    &.is-loading
+      // 请求期间仅保留标签高度，避免标题在数据返回时跳动。
+      opacity: 0
+      pointer-events: none
+    &.loaded
+      opacity: 1
+      .wiki-cover-release-value
+        display: inline
+      &:hover
+        color: inherit
+        background: unquote('color-mix(in srgb, var(--text-banner-theme, var(--background)) 20%, transparent)')
+  .cover-title
+    margin: 0
+    // 标题自身以 contrast 模式计算，始终在黑白之间切换，不继承容器主题色。
+    color: var(--text-banner, var(--text))
+    // 主题色仅作为外发光轮廓，保留黑白标题的对比度。
+    text-shadow: 0 0 16px unquote('color-mix(in srgb, var(--text-banner-theme, currentColor) 30%, transparent)'), 0 0 32px unquote('color-mix(in srgb, var(--text-banner-theme, currentColor) 20%, transparent)'), 0 0 64px unquote('color-mix(in srgb, var(--text-banner-theme, currentColor) 10%, transparent)')
+    font-size: clamp(2.5rem, 3vw, 4.75rem)
+  .description
+    margin: 0
+    color: var(--text-banner-theme, var(--text-p2))
+    line-height: 1.75
+    text-shadow: 0 0 8px unquote('color-mix(in srgb, var(--text-banner-theme, currentColor) 50%, transparent)'), 0 0 16px unquote('color-mix(in srgb, var(--text-banner-theme, currentColor) 10%, transparent)')
+  .wiki-cover-actions
+    display: flex
+    flex-wrap: wrap
+    gap: 1rem
+    a.button
+      display: inline-flex
+      align-items: center
+      gap: .5rem
+      padding: .5rem 1.25rem .5rem 1rem
+      border-radius: 100px
+      border: 1px solid unquote('color-mix(in srgb, var(--text-banner-theme, white) 50%, transparent)')
+      color: inherit
+      background: unquote('color-mix(in srgb, var(--text-banner-theme, var(--background)) 20%, transparent)')
+      backdrop-filter: blur(12px)
+      trans1 background
+      svg
+        width: 1.5rem
+        height: 1.5rem
+      &:hover
+        color: inherit
+        background: unquote('color-mix(in srgb, var(--text-banner-theme, var(--background)) 50%, transparent)')
+      &.wiki-cover-source
+        border-color: var(--text-banner, var(--text))
+        color: var(--text-banner, var(--text))
+        background: var(--text-banner, var(--text))
+        svg, span
+          filter: invert(1)
+        &:hover
+          color: var(--text-banner, var(--text))
+          background: var(--text-banner, var(--text))
+  .wiki-cover-preview
+    width: 100%
+    border-radius: 1.25rem
+    overflow: hidden
+    box-shadow: 0 24px 60px rgba(0,0,0,.18)
+    > img
+      display: block
+      width: 100%
+      max-height: 62vh
+      object-fit: contain
+      background: var(--card)
+  .wiki-cover-terminal
+    position: relative
+    min-height: 150px
+    padding: 1rem
+    color: var(--text-banner-theme)
+    background: unquote('color-mix(in srgb, var(--text-banner-theme, var(--background)) 20%, transparent)')
+    backdrop-filter: blur(12px) brightness(0.8)
+    font-family: $ff-code
+    .wiki-cover-terminal-toolbar
+      display: flex
+      align-items: center
+      justify-content: space-between
+      margin-bottom: 1.4rem
+    .wiki-cover-terminal-tabs
+      display: flex
+      gap: .5rem
+      button
+        padding: .5rem .75rem
+        border-radius: 8px
+        color: inherit
+        opacity 0.5
+        font-family: inherit
+        font-size: $fs-13
+        line-height: 1
+        font-weight: 500
+        &.active
+          opacity 1
+          background: unquote('color-mix(in srgb, var(--text-banner-theme, var(--background)) 20%, transparent)')
+    pre
+      margin: 0
+      padding: 0
+      overflow-x: auto
+      color: inherit
+      background: transparent
+      font: 1rem
+      line-height: 1.8
+      code span
+        display: block
+      code span:before
+        content: '$ '
+        color: #8ca5ff
+    .wiki-cover-copy
+      display: inline-flex
+      align-items: center
+      gap: .5rem
+      padding: .5rem .75rem .5rem .5rem
+      border-radius: 8px
+      color: var(--text-banner, var(--text))
+      font-family: inherit
+      font-size: $fs-13
+      line-height: 1
+      background: unquote('color-mix(in srgb, var(--text-banner-theme, var(--background)) 20%, transparent)')
+      trans1 background
+      &:hover
+        background: unquote('color-mix(in srgb, var(--text-banner-theme, var(--background)) 50%, transparent)')
+  &.without-preview .wiki-cover-content
+    grid-template-columns: minmax(0, 560px)
+    justify-content: center
+
+@media screen and (max-width: $device-tablet)
+  .l_cover.wiki-hero
+    height: auto
+    min-height: 100vh
+    padding: 7rem 0 4rem
+    .wiki-cover-layout
+      width: calc(100% - 3rem)
+      max-width: 620px
+      height: auto
+      display: grid
+      grid-template-rows: auto 1fr
+      position: static
+    .wiki-navbar
+      position: absolute
+      top: 1.5rem
+      left: 1.5rem
+      right: 1.5rem
+      padding-top: 0
+    .wiki-cover-content
+      height: auto
+      margin-bottom: 5rem
+      grid-template-columns: 1fr
+      gap: 5rem
+    .wiki-cover-intro
+      max-width: none
+    .wiki-cover-preview
+      max-width: 620px
+
+@media screen and (max-width: $device-mobile)
+  .l_cover.wiki-hero
+    .wiki-cover-layout
+      width: calc(100% - 2rem)
+    .wiki-navbar
+      left: 1rem
+      right: 1rem
+    .cover-title
+      font-size: 2rem
+    .wiki-cover-actions
+      a.button
+        padding: .25rem .75rem .25rem .5rem
+
+@media (prefers-reduced-motion: reduce)
+  .l_cover.wiki-hero .wiki-cover-background.galaxy canvas
+    display: none

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

@@ -31,8 +31,8 @@ article.md-text.content+.related-wrap
     .title
       color: var(--text-p1)
       font-weight: 500
-      --fsp: $fsp1
-      font-size: var(--fsp)
+      --fs-content: $fs-content-1
+      font-size: var(--fs-content)
       trans2 color border
       position: relative
       padding-bottom: 2px
@@ -40,8 +40,8 @@ article.md-text.content+.related-wrap
       line-height: 1.6
     .excerpt
       color: var(--text-p3)
-      --fsp: $fsp3
-      font-size: var(--fsp)
+      --fs-content: $fs-content-3
+      font-size: var(--fs-content)
       margin-top: 0.5rem
       display: -webkit-box
       -webkit-box-orient: vertical
@@ -99,9 +99,13 @@ article.md-text.content+.related-wrap
   .cmt-body
     min-height: 150px
     position: relative
-    svg.loading
+    .lazy-icon
+      position: absolute
       top: 60px
+      left: 50%
+      transform: translateX(-50%)
+      z-index: -1
     iframe
       border-radius: 4px
       border: none
-      width: 100%
+      width: 100%

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

@@ -2,22 +2,76 @@
   margin: 0.5rem var(--gap-base) 1rem
 
 .social-wrap
-  display: grid
-  grid-gap: 0.25rem 0.25rem
-  grid-template-columns: repeat(auto-fill, 32px)
+  display: flex
+  flex-wrap: wrap
+  gap: 0.5rem
+  align-items: center
   text-align: center
   .social
     line-height: 0
-    display: inline-block
-    padding: 6px
-    border-radius: 32px
+    display: inline-flex
+    align-items: center
+    box-sizing: border-box
+    flex: 0 0 auto
+    height: 32px
+    padding: 4px
+    border-radius: 8px
     filter: grayscale(100%)
     overflow: hidden
-    background: transparent
-    trans3: box-shadow background transform
-    &:hover
-      z-index: 1
-      filter: unset
-      background: var(--bg-a100)
+    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
+
+  .social-spacer
+    flex: 1 1 0
+    min-width: 0
+    height: 32px
+    pointer-events: none
+
+  .social-dropdown
+    position: relative
+    box-sizing: border-box
+    flex: 0 0 auto
+    height: 32px
+    line-height: 0
+    >.dropdown-trigger.social
+      >img, >svg
+        opacity: .5
+    // JS 未加载时保留向上展开的原生 details 兜底；正常情况下菜单会移入全局浮层。
+    >.dropdown-menu
+      top: auto
+      bottom: calc(100% + 0.5rem)
+    &:first-child:not(:last-child) >.dropdown-menu, &:only-child >.dropdown-menu
+      left: 0
+      transform: none
+    &:last-child:not(:first-child) >.dropdown-menu
+      right: 0
+      left: auto
+      transform: none
+
+  .social:hover
+    background: var(--ui-item-bg-hover)
+    box-shadow: var(--ui-item-shadow-hover)
+
+  .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

@@ -1,2 +1,7 @@
 .nav-area
-  margin: 2rem 0
+  margin: 2rem 0
+  .menu
+    width: 100%
+    margin: 0
+    .ui-collection__title
+      font-size: $fs-15

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

@@ -118,13 +118,17 @@
       list-style-type: none
     li a
       display: block
-      background: var(--bg-a20)
+      background: var(--ui-summary-item-bg)
       line-height: 1.2
       padding: 0.75rem 1rem
       border-radius: $border-card-s
       trans1 background
       &:hover
-        background: var(--bg-a50)
+        background: var(--ui-adapter-bg-hover)
+        box-shadow: var(--ui-adapter-shadow-hover)
+      &:focus-visible
+        outline: 2px solid var(--theme)
+        outline-offset: 2px
     li+li
       margin-top: 8px
     .search-result-title

package/source/css/_components/tag-plugins/chat.styl

@@ -314,7 +314,7 @@ chat_dark()
                                 align-items: center
                                 >svg,
                                 >span
-                                    height: $fs-12 + .05rem
+                                    height: 'calc(%s * 0.8)' % var(--fs-content-base)
                         
                     &.voice
                         display: flex

package/source/css/_components/tag-plugins/folders.styl

@@ -1,7 +1,7 @@
 .tag-plugin.folders
   margin: var(--gap-p) 0
-  --fsp: $fsp2
-  font-size: var(--fsp)
+  --fs-content: $fs-content-2
+  font-size: var(--fs-content)
   border-top: 1px solid var(--block-border)
   overflow: hidden
   .folder
@@ -43,8 +43,8 @@
       content: '-'
       
   >div.body
-    --fsp: $fsp1
+    --fs-content: $fs-content-1
     >:first-child
       margin-top: 1rem
     >:last-child
-      margin-bottom: 0
+      margin-bottom: 0

package/source/css/_components/tag-plugins/folding.styl

@@ -11,8 +11,8 @@ details.folding
     margin: -1rem
     color: var(--text-p2)
     font-weight: 500
-    --fsp: $fsp2
-    font-size: var(--fsp)
+    --fs-content: $fs-content-2
+    font-size: var(--fs-content)
     position: relative
     line-height: 1.2
     outline: none
@@ -45,7 +45,7 @@ details.folding[open]
     padding: 0 1rem 1rem
     margin: 0 -1rem -1rem
     color: var(--text-p1)
-    --fsp: $fsp1
+    --fs-content: $fs-content-1
     >:first-child
       margin-top: 1rem
     >:last-child

package/source/css/_components/tag-plugins/hashtag.styl

@@ -6,8 +6,8 @@
   margin: 2px 0
   display: inline-flex
   align-items: center
-  --fsp: $fsp2
-  font-size: var(--fsp)
+  --fs-content: $fs-content-2
+  font-size: var(--fs-content)
   font-weight: 500
   trans2 background color
   span  
@@ -15,4 +15,3 @@
   &:hover
     background: var(--text-p2)
     color: var(--theme-block)
-  

package/source/css/_components/tag-plugins/mdrender.styl

@@ -1,6 +1,6 @@
 .ds-mdrender
   p strong
-    font-size: $fs-body
+    font-size: var(--fs-content)
     font-weight: 500
     color: var(--text)
 

package/source/css/_components/tag-plugins/note.styl

@@ -8,16 +8,16 @@
     border: 1px solid var(--theme-border)
   color: var(--text-p1)
   >.title
-    --fsp: $fsp1
-    font-size: var(--fsp)
+    --fs-content: $fs-content-1
+    font-size: var(--fs-content)
     line-height: 1.5
     margin-top: var(--gap-p-compact)
     font-weight: 500
     color: var(--text)
   >.body
     &,p
-      --fsp: $fsp2
-      font-size: var(--fsp)
+      --fs-content: $fs-content-2
+      font-size: var(--fs-content)
       line-height: 1.5
     margin-top: var(--gap-p-compact)
     margin-bottom: var(--gap-p-compact)

package/source/css/_components/tag-plugins/poetry.styl

@@ -3,15 +3,15 @@
   flex-direction: column
   align-items: center
   text-align: left
-  --fsp: $fs-body
+  --fs-content: var(--fs-content-base)
   .content
     >.title
       font-weight: 500
       margin-top: var(--gap-p)
     >.meta
       color: var(--text-p2)
-      --fsp: $fsp3
-      font-size: var(--fsp)
+      --fs-content: $fs-content-3
+      font-size: var(--fs-content)
       font-weight: 500
       span+span
         margin-left: 4px
@@ -24,8 +24,8 @@
       font-style: italic
       color: var(--text-p4)
       margin: var(--gap-p) 0
-      --fsp: $fsp3
-      font-size: var(--fsp)
+      --fs-content: $fs-content-3
+      font-size: var(--fs-content)
 
 // 描边修饰
 .md-text .tag-plugin.poetry .content

package/source/css/_components/tag-plugins/quot.styl

@@ -29,7 +29,7 @@
   h3,h4,h5,h6
     font-size: $fsh3
   p
-    font-size: calc(var(--fsp) + 2px)
+    font-size: calc(var(--fs-content) + 2px)
     color: var(--text)
 
 // type=icon
@@ -71,4 +71,3 @@
         opacity: 0.2
         filter: blur(8px)
         transform: translateY(4px) scale(1.2, 1.5)
-

package/source/css/_components/tag-plugins/quote.styl

@@ -4,4 +4,4 @@
     text-indent: 0 !important
   &[indent='true']
     p:not([class])
-        text-indent: 'calc(%s * 2)' % var(--fsp) !important
+        text-indent: 'calc(%s * 2)' % var(--fs-content) !important

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

@@ -44,8 +44,8 @@
         display: block
         cursor: pointer
         padding: .25rem .75rem
-        --fsp: $fsp3
-        font-size: var(--fsp)
+        --fs-content: $fs-content-3
+        font-size: var(--fs-content)
         line-height: inherit
         font-weight: 500
         color: var(--text-p3)

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

@@ -96,7 +96,7 @@
   margin-top: 4px
   box-shadow: $boxshadow-block
   p
-    --fsp: $fsp1
+    --fs-content: $fs-content-1
     img  
       display: block
   &:empty
@@ -112,8 +112,8 @@
     color: var(--text-p1)
     line-height: 1.25
     padding: 0.75rem 1rem
-    --fsp: $fsp1
-    font-size: var(--fsp)
+    --fs-content: $fs-content-1
+    font-size: var(--fs-content)
   &.ds-artalk .body
     img
       max-height: 1.5em
@@ -218,7 +218,7 @@ aside .tag-plugin.timeline[data-api] .body .lazy-box
   padding: 0 0.5rem
   margin: 0.75rem 0
   p
-    --fsp: $fsp2
+    --fs-content: $fs-content-2
     margin: 0.25rem
 
 .tag-plugin.timeline .body

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

@@ -6,18 +6,5 @@
     >*:first-child
       margin-top: .75rem
 
-.widget-wrapper.markdown .linklist
+.widget-wrapper.markdown .ui-collection
   margin: 1em 0
-  .link
-    background: var(--bg-a50)
-  .link:hover
-    background: var(--bg-a100)
-
-.l_left .widget-wrapper.markdown .linklist .link:hover
-  sidebar-light()
-
-.l_right .widget-wrapper.markdown .linklist
-  .link
-    background: var(--block)
-  .link:hover
-    background: var(--theme-a20)

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

@@ -9,7 +9,7 @@
     a
       trans1 all
       word-break: break-all
-      --fsp: $fsp2
+      --fs-content: $fs-content-2
   .tag-plugin.timeline .timenode
     z-index 1
     margin-top: 0.25rem
@@ -27,7 +27,7 @@
       border-radius: $border-card
       padding: 0.5rem 1rem
       p,li
-        --fsp: $fsp3
+        --fs-content: $fs-content-3
       code 
         background: none
         padding: 0