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

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

@@ -1,84 +1,16 @@
-.l_left
-  margin: var(--gap-page)
-  max-height: calc(100vh - var(--gap-page) * 2)
-  border-radius: $border-card-l
-  .header
-    margin: var(--gap-base) var(--gap-base) 0
+.site-region--leftbar .site-region__surface
+  overflow: visible
 
-.l_right
-  margin: var(--gap-page) 0
-  border-radius: $border-card-l
-@media screen and (min-width: $device-2k)
-  .l_left
-    margin-left: auto
-    margin-right: calc(2 * var(--gap-page))
-  .l_right
-    margin-left: var(--gap-page)
-    margin-right: auto
-
-// 纯色卡片风格（style.leftbar.ui-style: card）：
-// 实色 var(--card) 背景 + 中间档阴影，隐藏图片背景与磨砂叠加层
-.l_left.leftbar-card
-  background: var(--card)
-  box-shadow: $boxshadow-float
-  // 卡片风格交互变量：列表项 hover/active 用 var(--block-border)，搜索条底部条默认用 var(--text-meta)
-  --leftbar-item-bg: var(--block-border)
-  --leftbar-item-shadow: none
-  --leftbar-search-line: var(--text-meta)
-  // 卡片风格组件背景：白色半透明填充（--bg-a20/a50/a60/a75）统一改为 var(--block)，
-  // --bg-a100（不透明白）改为 var(--block-border) 保留 hover 反馈，与右栏观感一致
-  --bg-a20: var(--block)
-  --bg-a50: var(--block)
-  --bg-a60: var(--block)
-  --bg-a75: var(--block)
-  --bg-a100: var(--block-border)
-  .sidebg
-    display: none
-  .leftbar-container
-    &:before
-    &:after
-      display: none
-
-.l_left
-  .sidebg
-    pointer-events: none
-    position: absolute
-    --inset: 0
-    top: var(--inset)
-    bottom: var(--inset)
-    left: var(--inset)
-    right: var(--inset)
-    border-radius: $border-card-l
-    --saturate: 400%
-    --blur-px: convert(hexo-config('style.leftbar.blur-px'))
-    --background-opacity: 1
-    if $leftbar-background-image
-      background-position: center
-      background-size: cover
-      if hexo-config('style.leftbar.blur-px')
-        --inset: 32px
-      if hexo-config('style.leftbar.background-opacity')
-        --background-opacity: hexo-config('style.leftbar.background-opacity')
-      background-image: convert(hexo-config('style.leftbar.background-image'))
-      filter: saturate(var(--saturate)) blur(var(--blur-px)) opacity(var(--background-opacity))
-      :root[data-theme="dark"] &
-        --background-opacity: hexo-config('style.leftbar.background-opacity') * 0.75
-      :root:not([data-theme]) &
-        @media screen and (prefers-color-scheme: dark)
-          --background-opacity: hexo-config('style.leftbar.background-opacity') * 0.75
-    else if $leftbar-background-color-light || $leftbar-background-color-dark
-      background-color: convert($leftbar-background-color-light)
-      :root:not([data-theme]) &
-        @media screen and (prefers-color-scheme: dark)
-          background-color: convert($leftbar-background-color-dark)
-
-  .leftbar-container
-    height: calc(100vh - var(--gap-page) * 2)
+.site-region--leftbar
+  .site-region__viewport
+    height: 100%
+    max-height: inherit
     display: flex
     flex-direction: column
     word-break: break-all
     text-align: justify
-    border-radius: $border-card-l
+    border-radius: inherit
+    background: transparent
     overflow: hidden
     // 搜索条激活（有输入内容）时隐藏导航区与组件区，给搜索结果腾出空间
     > .search-wrapper[searching='true']
@@ -90,38 +22,72 @@
       -webkit-mask: linear-gradient(white, 90%, transparent)
     >*
       z-index 1
-    &:before,&:after
-      position: absolute
-      pointer-events: none
-      content: ''
-      top: 0
-      bottom: 0
-      left: 0
-      right: 0
-      border-radius: $border-card-l
-    &:before
-      if $leftbar-background-image
-        @media screen and (min-width: $device-mobile-max)
-          background: rgba(white, 0.05)
-          box-shadow: inset 0 0 32px 1px rgba(white, 0.5)
-          backdrop-filter: saturate(300%)
-          -webkit-backdrop-filter: saturate(300%)
-          mask: linear-gradient(black, rgba(black, 0.5), 70%, transparent, 90%, transparent)
-          -webkit-mask: linear-gradient(black, rgba(black, 0.5), 70%, transparent, 90%, transparent)
-        :root[data-theme="dark"] &
-          background: rgba(white, 0.05)
-          box-shadow: inset 0 0 32px 1px rgba(white, 0.1)
-        :root:not([data-theme]) &
-          @media screen and (prefers-color-scheme: dark)
-            background: rgba(white, 0.05)
-            box-shadow: inset 0 0 32px 1px rgba(white, 0.1)
 
-@media screen and (max-width: $device-mobile-max)
-  .l_left
-    overflow: hidden
-    background: var(--bg-a100)
-    .sidebg
-      --inset: 0
-      --saturate: 300%
-    .leftbar-container:after
-      background: var(--bg-a20)
+// Leftbar 的公开 widgets 数组在内部投影为固定顶部、滚动主体与统一 Footer。
+.site-region--leftbar
+  .site-region__viewport
+    padding: var(--gap-base)
+    gap: var(--gap-base)
+  .site-region__zone
+    position: relative
+    z-index: 1
+    min-width: 0
+  .site-region__zone--top
+    flex: 0 0 auto
+  .site-region__project-toolbar
+    min-height: 40px
+    display: flex
+    align-items: center
+    justify-content: space-between
+    gap: 8px
+    .site-region__project-home,
+    .site-region__project-search
+      min-width: 0
+      display: flex
+      align-items: center
+    .site-region__project-search
+      margin-inline-start: auto
+      .ui-collection__item
+        width: 32px
+        min-width: 32px
+        height: 32px
+        min-height: 32px
+        padding: 4px
+        justify-content: center
+  .site-region__zone--body
+    flex: 1 1 auto
+    min-height: 0
+    overflow-x: hidden
+    overflow-y: auto
+    overscroll-behavior: contain
+    scrollbar(0, 0)
+    mask: linear-gradient(white, 90%, transparent)
+    -webkit-mask: linear-gradient(white, 90%, transparent)
+    > .widgets
+      padding-bottom: 64px
+  .site-region__footer
+    position: relative
+    z-index: 2
+    flex: 0 0 auto
+    display: flex
+    flex-direction: column
+    gap: 8px
+    min-width: 0
+  .site-region__footer-actions
+    flex: 0 0 auto
+    min-width: 0
+    .widget-stack
+      padding: 0
+  .site-region__system
+    flex: 0 0 auto
+    min-height: 32px
+    display: flex
+    align-items: center
+    gap: 8px
+  .site-region__settings
+    flex: 1 1 auto
+    min-width: 0
+    .widget-instance--settings
+      width: 100%
+  .widget-stack
+    margin: 0

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

@@ -35,34 +35,21 @@
       margin: 1rem
       .tag-plugin.navbar
         margin: 0
-        border-radius: 6px
-        padding: 2px
-        background: rgba(black, 0.2)
-        overflow: hidden
-        &:after
-          content: none
+        justify-content: flex-end
         .link
           margin: 0
-          border-radius: 4px
+          border-color: unquote('color-mix(in srgb, var(--text-banner-theme, white) 50%, transparent)')
+          border-radius: 100px
           color: var(--text-banner-theme, var(--text-banner))
-          opacity: .8
-          padding: 2px 6px
-          background: none
-          line-height: 1.5
-          font-size: $fs-15
+          background: unquote('color-mix(in srgb, var(--text-banner-theme, var(--background)) 20%, transparent)')
+          // banner 自身负责裁剪和背景变化；这里不用 backdrop-filter，避免破坏外层圆角裁剪。
           text-shadow: 0 0 1px rgba(0,0,0,0.12)
-          &+.link
-            margin-left: 2px
-          &:after
-            content: none
           &:hover
             color: var(--text-banner-theme, var(--text-banner))
-            opacity: 1
-            background: rgba(white, 0.25)
+            background: unquote('color-mix(in srgb, var(--text-banner-theme, var(--background)) 50%, transparent)')
           &.active
             color: var(--text-banner-theme, var(--text-banner))
-            opacity: 1
-            background: rgba(white, 0.25)
+            background: unquote('color-mix(in srgb, var(--text-banner-theme, var(--background)) 50%, transparent)')
         
       .back
         background: none
@@ -135,6 +122,15 @@
       text-shadow: 0 0 1px rgba(0,0,0,0.12)
 
 .tag-plugin.banner
+  background-color: var(--block)
+  &.no-bg
+    background-image: none
+    .content
+      --text-banner: var(--text-p1)
+      --text-banner-theme: var(--text-p2)
+      color: var(--text-banner)
+    .title
+      text-shadow: none
   // 内容区用绝对定位铺满整卡：避免 flex 百分比高度（height: 100%）在不同浏览器解析不一致，
   // 导致 .top/.bottom 无法贴顶/贴底（navbar 掉到中间）
   .content
@@ -161,14 +157,6 @@
     -webkit-transition: all .2s ease-out, transform 1.5s ease-out
     -o-transition: all .2s ease-out, transform 1.5s ease-out
 
-.tag-plugin.banner .navbar a.active
-  // 不使用 blur-effect()（backdrop-filter）：banner 是 overflow:hidden + 圆角/连续曲率的裁剪容器，
-  // backdrop-filter 在部分浏览器（Safari / 旧版 Chromium）会破坏父级圆角裁剪，
-  // hover 放大背景图时四角变直角；改用与 hover 一致的半透明白底
-  background: rgba(white, 0.25)
-  &:hover
-    background-color: var(--card)
-
 @media screen and (max-width: $device-mobile-max)
   .banner.top
     border-radius: 0

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

@@ -5,6 +5,11 @@
   line-height: 1.2
   --gap-p: 'calc(%s / 2)' % var(--gap-p-compact)
   input
+    flex-shrink: 0
+    margin-right: 8px
+    if hexo-config('tags.checkbox.interactive') != true
+      pointer-events: none
+  input[type=checkbox]
     -webkit-appearance: none
     -moz-appearance: none
     -ms-appearance: none
@@ -17,10 +22,6 @@
     display: inline-block
     outline: none
     border-radius: 2px
-    flex-shrink: 0
-    margin-right: 8px
-    if hexo-config('tag_plugins.checkbox.interactive') != true
-      pointer-events: none
   /* Checkbox */
   input[type=checkbox]
     &:before, &:after
@@ -130,26 +131,10 @@
         top: 5px
         width: 10px
         height: 2px
-  /* Radio */
-  input[type=radio]
-    border-radius: 50%
-    transform: translateY(-1px)
-    &:before
-      content: ""
-      display: block
-      width: 8px
-      height: 8px
-      border-radius: 50%
-      margin: 2px
-      transform: scale(0)
-    &:checked:before
-      transform: scale(1)
   /* Colors */
-  input
+  input[type=checkbox]
     border: 2px solid var(--theme)
-    &[type=checkbox]:checked
-      background: var(--theme)
-    &[type=radio]:checked:before
+    &:checked
       background: var(--theme)
 
 

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

@@ -29,15 +29,13 @@
   span+input.copy-area
     text-indent: 0
   button.copy-btn
-    margin: 2px 2px 2px 0
+    margin: 0
     border-radius: 'calc(%s - 2px)' % $border-bar
     display: inline-block
-    background: var(--block)
     trans1 all
     line-height: 0
-    font-size: 1rem
-    padding: 0 .75rem
+    font-size: 1.25rem
+    padding: 0 .5rem
     color: var(--text-p2)
     &:hover
       color: var(--theme)
-      background: var(--theme-a20)

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

@@ -86,10 +86,10 @@
       &:nth-child(3n+1)
         grid-column: auto / span 2
         grid-row: auto / span 2
-  &[ratio='square']
+  &[aspect_ratio='square']
     .grid-cell
       aspect-ratio: 1
-  &[ratio='portrait']
+  &[aspect_ratio='portrait']
     .grid-cell
       aspect-ratio: 2 / 3
   .grid-cell

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

@@ -1,6 +1,9 @@
 .tag-plugin.grid
   display: grid
   grid-gap: 16px
+  >.cell > .tag-plugin:only-child
+    margin-top: 0
+    margin-bottom: 0
   &[bg]>.cell>
     p   
       line-height: 1.5

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

@@ -31,7 +31,8 @@
       font-size: 1.125rem
       padding: 6px
       line-height: 0
-      border-radius: 40px
+      border-radius: 50%
+      corner-shape: round
       trans3: color opacity background
       color: var(--text-p1)
       &:hover

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

@@ -5,7 +5,6 @@
   text-align: left
 
 .md-text .link-card
-  background: var(--card)
   display: inline-flex
   justify-content: space-between
   align-items: center

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

@@ -1,5 +1,20 @@
 .md-text .tag-plugin.mark
-  padding: 1px 2px
-  border-radius: 2px
-  background: var(--theme-mark)
-  color: var(--text)
+  background: none
+  color: var(--text-p0)
+  font-weight: 500
+  text-decoration-line: underline
+  text-decoration-color: var(--theme-mark)
+  text-decoration-thickness: 8px
+  text-underline-offset: -4px
+  text-decoration-skip-ink: none
+  .mark-tip
+    display: inline-flex
+    align-items: center
+    padding: 0 .5em
+    border: 1px solid var(--theme-border)
+    border-radius: 100px
+    background: var(--theme-block)
+    color: var(--text-p0)
+    font-size: .75em
+    font-weight: 500
+    vertical-align: .08em

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

@@ -4,12 +4,12 @@
     font-weight: 500
     color: var(--text)
 
-.l_body[text-indent] article.content .ds-mdrender
+body[data-text-indent] article.content .ds-mdrender
   p:not([class])
     text-indent: 0
 
 
-.l_body[type=story] .md-text.content 
+body[data-article-style='story'] .md-text.content
   .ds-mdrender
     ol,ul
       margin-left: .5rem

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

@@ -1,21 +1,27 @@
 .tag-plugin.navbar
   display: inline-flex
+  flex-wrap: wrap
+  gap: .5rem
+  max-width: 100%
+  margin-top: .5rem
   a
+    display: inline-flex
+    align-items: center
     box-sizing: border-box
-    padding: .25rem 0
-    color: inherit
-    position: relative
-    &+a
-      margin-left: 1rem
-    &:after
-      content: ''
-      position: absolute
-      border-radius: 2px
-      width: 100%
-      height: 2px
-      left: 0
-      bottom: 0
-      trans1 all
-    &.active,&:hover
-      &:after
-        background: var(--theme)
+    padding: .5rem 1.25rem
+    border: 1px solid var(--block-border)
+    border-radius: 100px
+    color: var(--text-p2)
+    background: var(--block)
+    font-weight: 500
+    line-height: 1
+    text-decoration: none
+    trans2 background border-color
+    &:hover
+      border-color: var(--text-p4)
+      color: var(--text-p1)
+      background: var(--block-border)
+    &.active
+      border-color: var(--theme)
+      color: var(--theme)
+      background: var(--theme-block)

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

@@ -4,7 +4,7 @@
   border-radius: $border-card
   background: var(--theme-block)
   overflow: hidden
-  if hexo-config('tag_plugins.note.border') == true
+  if hexo-config('tags.note.border') == true
     border: 1px solid var(--theme-border)
   color: var(--text-p1)
   >.title
@@ -64,5 +64,5 @@
 .md-text .tag-plugin .tag-plugin.note
   --gap-p: 1rem
 
-.l_body[type=story] .tag-plugin.note .title p:not([class])
+body[data-article-style='story'] .tag-plugin.note .title p:not([class])
   text-indent: 0

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

@@ -2,8 +2,7 @@
   position: relative
   border-radius: $border-card
   background: var(--theme-block)
-  if hexo-config('tag_plugins.okr.border') == true
-    border: 1px solid var(--theme-border)
+  border: 1px solid var(--theme-border)
   overflow: hidden
   color: var(--text-p1)
   line-height: 1.5

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

@@ -45,6 +45,11 @@
     padding-top: 1px
   span.empty
     padding: 0 8px
+  .quot-icon.colorful[color]
+    display: inline-flex
+    flex-shrink: 0
+    img,svg
+      color: var(--theme)
 
 .md-text .tag-plugin.quot.p
   .content

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

@@ -35,5 +35,6 @@
   font-weight: 500
   font-size: $fs-12
 
-.tag-plugin.ds-rating.rated
-  pointer-events: none
+.tag-plugin.ds-rating.rated,
+.tag-plugin.ds-rating.is-disabled
+  pointer-events: none

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

@@ -17,7 +17,7 @@
     padding-left: 0
     &:before
       display: none
-.l_body[type=story] .md-text.content 
+body[data-article-style='story'] .md-text.content
   .tag-plugin.timeline
     ol,ul
       margin-left: 0

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

@@ -1,4 +1,4 @@
-// 气泡注解标签（#602）：{% tip text:注解 %}词句{% endtip %}
+// 气泡注解标签（#602）：{% tip 词句 pop:注解 %}
 .tag-plugin.tip
   position: relative
   display: inline-block

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

@@ -47,5 +47,6 @@
 
 
 // 已经投过票了
-.tag-plugin.ds-vote.voted
-  pointer-events: none
+.tag-plugin.ds-vote.voted,
+.tag-plugin.ds-vote.is-disabled
+  pointer-events: none

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

@@ -10,7 +10,8 @@
       margin-top: 0.5rem
     span
       color: var(--text-p2)
-    svg
+    .ui-icon
+      --ui-icon-size: 1em
       margin-right: 4px
     .flex-row
       display: flex 

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

@@ -7,10 +7,9 @@
     align-items: center
     color: var(--text-p2)
     trans1 all
-    svg
+    .ui-icon
+      --ui-icon-size: 1em
       margin-right: 4px
-      width 1em
-      height: 1em
     &:hover
       color: var(--text)
 
@@ -59,10 +58,9 @@
     align-items: center
     justify-content: center
     trans1: background
-    svg
+    .ui-icon
+      --ui-icon-size: 1.5em
       margin-right: 6px
-      height: 1.5em
-      width: auto
     &:hover
       background: var(--accent)
 

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

@@ -0,0 +1,49 @@
+.settings-widget
+  min-width: 0
+  width: 100%
+  height: 32px
+  min-height: 32px
+  padding: 0
+  display: flex
+  align-items: center
+  gap: 10px
+  border-radius: 16px
+
+.settings-widget__avatar
+  flex: 0 0 32px
+  width: 32px
+  height: 32px
+  display: grid
+  place-items: center
+  border-radius: 50%
+  overflow: hidden
+  color: var(--text-p2)
+  background: transparent
+  > img
+    width: 100%
+    height: 100%
+    object-fit: cover
+
+.settings-widget__name
+  min-width: 0
+  font-size: $fs-14
+  font-weight: 500
+  txt-ellipsis()
+
+.site-region--leftbar,
+.site-region--topbar
+  .settings-widget__avatar > img
+    width: 24px
+    height: 24px
+    border-radius: 50%
+    corner-shape: round
+
+.site-region--topbar,
+html[data-leftbar-state='collapsed'] .site-shell:not([data-drawer='leftbar']) .site-region--leftbar
+  .settings-widget__name
+    display: none
+
+.site-region--topbar .settings-widget,
+html[data-leftbar-state='collapsed'] .site-shell:not([data-drawer='leftbar']) .site-region--leftbar .settings-widget
+  width: 32px
+  justify-content: center

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

@@ -39,11 +39,11 @@
   .tag-plugin.timeline[data-api] .body .footer
     background: none
 
-.l_left .widget-wrapper.timeline
+.site-region--leftbar .widget-wrapper.timeline
   .tag-plugin.timeline
     padding-left: 0
     &:before
       content: none
-.l_left .widget-wrapper.timeline .body
+.site-region--leftbar .widget-wrapper.timeline .body
   box-shadow: none
   background: var(--bg-a50)