hexo-theme-stellar 1.32.0 → 1.32.2

package/source/css/_components/pages/article-story.styl

@@ -9,13 +9,13 @@
     color: var(--text)
     line-height: 1.2
     >a:first-child
-      background: $color-theme
+      background: var(--theme)
       border-radius: 2px
       margin-right: 8px
       padding: 0 2px
       trans1 all
       &:hover
-        background: $color-hover
+        background: var(--accent)
       &:before,&:after
         color: white
         font-weight: 700
@@ -30,7 +30,7 @@
       display: inline-block
       width: 12px
       height: 1.2em
-      background: $cDeepOrange
+      background: $c-accent
       transform: skewX(-20deg)
       margin: 0 0.5em
       vertical-align: top
@@ -41,7 +41,7 @@
     &:before,&:after
       position absolute
       font-size: 1.2em
-      background-color: hsla($color-theme, 0.5)
+      background-color: x-theme-alpha(0.5)
       width: 1em
       height: 1em
       content: ''
@@ -51,9 +51,9 @@
       vertical-align: middle
     &:before
       margin-left: -1em
-      svg-mask-icon($h3Left)
+      svg-mask-icon($iH3Left)
     &:after
-      svg-mask-icon($h3Right)
+      svg-mask-icon($iH3Right)
 
   h4:not([class])
     position: relative
@@ -64,7 +64,7 @@
       height: 32px
       margin-left: -16px
       margin-top: -12px
-      background: hsla($color-theme, 0.3)
+      background: x-theme-alpha(0.3)
       border-radius: 50%
       --blur-px: 8px
       filter: blur(var(--blur-px))
@@ -73,7 +73,7 @@
       trans1 all 0.5s
     &:hover:before
       --blur-px: 24px
-      background: hsla($color-theme, 1)
+      background: x-theme-alpha(1)
 
   ol,ul
     margin-left: 'calc(%s * 2)' % var(--fsp)
@@ -82,38 +82,7 @@
     margin: 2em 0 1.5em
     >a:first-child
       display: none
-  // 修正缩进效果
-  >blockquote,.tag-plugin.quote
-    text-align: center
-    --inset: calc(var(--fsp) * 2)
-    margin-left: var(--inset)
-    margin-right: var(--inset)
-    background: var(--block)
-    padding: 1rem 2rem
-    border-radius: $border-card
-    &:before,&:after
-      position: absolute
-      font-size: 2rem
-      background-color: hsla($color-theme, 0.25)
-      top: -0.3em
-      width: 1em
-      height: 1em
-      content: ''
-      opacity 1
-      trans1 all
-    &:before
-      left: -0.3em
-      svg-mask-icon($iQuoteLeft)
-    &:after
-      right: -0.3em
-      svg-mask-icon($iQuoteRight)
-    p:not([class])
-      color: var(--text-p2)
-      font-size: $fs-body
-      text-indent: 2em
-    &:hover
-      &:before,&:after
-        background-color: hsla($color-theme, 0.5)
+
   // 取消缩进效果
   .poetry, .okr, .timeline, li, .article-footer
     p:not([class])
@@ -124,6 +93,39 @@
     border-radius: $border-image-l
 
 
+.l_body[type=story] .md-text.content>blockquote, .md-text.content .tag-plugin.blockquote
+  text-align: center
+  --inset: calc(var(--fsp) * 2)
+  margin-left: var(--inset)
+  margin-right: var(--inset)
+  background: var(--block)
+  padding: 1rem 2rem
+  border-radius: $border-card
+  &:before,&:after
+    position: absolute
+    font-size: 2rem
+    background-color: x-theme-alpha(0.25)
+    top: -0.3em
+    width: 1em
+    height: 1em
+    content: ''
+    opacity 1
+    trans1 all
+  &:before
+    left: -0.3em
+    svg-mask-icon($iQuoteLeft)
+  &:after
+    right: -0.3em
+    svg-mask-icon($iQuoteRight)
+  p:not([class])
+    color: var(--text-p2)
+    font-size: $fs-body
+    text-indent: 2em
+  &:hover
+    &:before,&:after
+      background-color: x-theme-alpha(0.5)
+
+
 .l_body[type=story] .article.banner .content .bottom.only-title
   justify-content: center
 

package/source/css/_components/pages/article-tech.styl

@@ -3,13 +3,13 @@
     color: var(--text)
     line-height: 1.8
     >a:first-child
-      background: $color-theme
+      background: var(--theme)
       border-radius: 2px
       margin-right: 8px
       padding: 0 2px
       trans1 all
       &:hover
-        background: $color-hover
+        background: var(--accent)
       &:before,&:after
         color: white
         font-weight: 700

package/source/css/_components/pages/notebook.styl

@@ -21,7 +21,7 @@
       opacity: .4
     &:hover
       &:before
-        color $color-theme
+        color var(--theme)
         opacity: 1
       color: var(--text)
       background: var(--block-border)
@@ -40,7 +40,7 @@
   justify-content: end
   align-items: center
   &:hover
-    color: $color-theme
+    color: var(--theme)
 
 .widget-body.tag-tree .tag-subtree.parent-tag > a .tag-switcher
   display: inline-block

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

@@ -10,24 +10,19 @@
       background: var(--block-border)
 
 .page-footer .sitemap
-  margin: .5rem -4px 2rem
-  display: grid
-  scrollbar-width: none
+  margin: .5rem -4px
   grid-gap: 1rem 1rem
-  grid-auto-flow: column dense
-  // grid-template-columns: repeat(auto-fill, minmax(80px, 1fr))
-  grid-template-columns: repeat(4, 1fr)
-  overflow: scroll
   scrollbar(0, 0)
-
+  column-count: 4
 
 .page-footer .sitemap .sitemap-group
+  break-inside: avoid
   display: flex
   flex-direction: column
   align-items: flex-start
+  padding-bottom: 1rem
   >span,>a
     text-decoration: none
-    txt-ellipsis()
     padding: 4px
   >span
     font-weight: 500
@@ -36,6 +31,7 @@
 
 
 .page-footer .text
+  margin-top: .5rem
   p
     margin: 4px 0
     line-height: 1.5

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

@@ -35,11 +35,11 @@
     z-index: 1
     trans1 all
     &:hover
-      background: var(--alpha100)
+      background: var(--bg-a100)
     &.active, &:hover
       color: var(--text)
     &.active
-      background: var(--alpha60)
+      background: var(--bg-a60)
       @media (prefers-color-scheme: dark)
         background: rgba(white, 0.25)
       box-shadow: $boxshadow-button

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

@@ -49,11 +49,11 @@ article.md-text.content+.related-wrap
       -webkit-line-clamp: 2
     &.active
       .title
-        border-bottom: 1px dashed $color-theme
+        border-bottom: 1px dashed var(--theme)
     &:hover
       .title
-        color: $color-hover
-        border-bottom: 1px solid $color-hover
+        color: var(--accent)
+        border-bottom: 1px solid var(--accent)
 
 
 .related-wrap#read-next
@@ -76,7 +76,7 @@ article.md-text.content+.related-wrap
       color: var(--text-p1)
       font-size: $fsh5
       &:hover
-        color: $color-hover !important
+        color: var(--accent) !important
     #next
       text-align: right
 .wiki+.related-wrap#read-next
@@ -94,8 +94,8 @@ article.md-text.content+.related-wrap
       margin: 0
       font-size: inherit
       a
-        --theme-link: $color-theme
-        --theme-link-opa: rgba($color-theme, 0.2)
+        --link: var(--theme)
+        --link-a20: x-theme-alpha(0.2)
   .cmt-body
     min-height: 150px
     position: relative

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

@@ -18,6 +18,6 @@
     &:hover
       z-index: 1
       filter: unset
-      background: var(--alpha100)
+      background: var(--bg-a100)
     img
       border-radius: 2px

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

@@ -20,7 +20,7 @@
     font-weight: 500
     color: var(--text-p3)
     text-align: center
-    background: var(--alpha50)
+    background: var(--bg-a50)
     trans1 background
     position: relative
     display: flex
@@ -30,14 +30,14 @@
     img,svg
       height: 28px
       object-fit: contain
-      filter: grayscale(100%) brightness(0.8) opacity(0.8)
+      filter: grayscale(50%) brightness(0.8) opacity(0.5)
       trans1 all
     span
       text-overflow: ellipsis
       word-break: keep-all
     &.active, &:hover
       color: var(--text-p1)
-      background: var(--alpha100)
+      background: var(--bg-a100)
       img,svg
         filter: unset
     &.active:after

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

@@ -24,14 +24,14 @@
       left: 1rem
       right: 1rem
       border-radius: $border-bar
-      background: var(--alpha100)
+      background: var(--bg-a100)
       @media screen and (prefers-color-scheme: dark)
-        background: var(--alpha20)
+        background: var(--bg-a20)
       z-index 0
       trans1 all
     &:hover,&:has(input:focus),&:has(input:not(:placeholder-shown))
       &:before
-        background: var(--alpha100)
+        background: var(--bg-a100)
         height: 100%
         left: 0
         right: 0
@@ -57,7 +57,7 @@
       color: var(--text-p2)
       fill: currentColor
       path[p-id="1562"]
-        color: $color-theme
+        color: var(--theme)
     
   &[searching='true']
     .search-button
@@ -75,7 +75,7 @@
     font-size: $fs-14
     padding: 2rem
     margin: 8px 0
-    background: var(--alpha20)
+    background: var(--bg-a20)
     border-radius: $border-card-s
 
 
@@ -93,13 +93,13 @@
       list-style-type: none
     li a
       display: block
-      background: var(--alpha20)
+      background: var(--bg-a20)
       line-height: 1.2
       padding: 0.75rem 1rem
       border-radius: $border-card-s
       trans1 background
       &:hover
-        background: var(--alpha100)
+        background: var(--bg-a100)
     li+li
       margin-top: 8px
     .search-result-title

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

@@ -25,23 +25,23 @@
     bottom: var(--inset)
     left: var(--inset)
     right: var(--inset)
-    background-position: center
-    background-size: cover
     border-radius: $border-card-l
-    --saturate: 300%
+    --saturate: 400%
     --blur-px: convert(hexo-config('style.leftbar.blur-px'))
-    --brightness: 100%
-    if hexo-config('style.leftbar') && hexo-config('style.leftbar.background-image')
+    --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)) brightness(var(--brightness)) blur(var(--blur-px))
+      filter: saturate(var(--saturate)) blur(var(--blur-px)) opacity(var(--background-opacity))
       @media screen and (prefers-color-scheme: dark)
-        --blur-px: 'calc(%s * 0.75)' % convert(hexo-config('style.leftbar.blur-px'))
-        --saturate: 200%
-        --brightness: 75%
-    else if hexo-config('style.leftbar') && hexo-config('style.leftbar.background')
-      background: convert(hexo-config('style.leftbar.background'))
+        --background-opacity: hexo-config('style.leftbar.background-opacity') * 0.75
+    else if $leftbar-background-color
+      background-color: convert($leftbar-background-color)
     
   .leftbar-container
     height: 'calc(%s - %s * 2 - %s)' % (100vh var(--gap-margin) $leftbar-bottom-margin)
@@ -67,24 +67,24 @@
       right: 0
       border-radius: $border-card-l
     &:before
-      @media screen and (min-width: $device-mobile-max)
-        background: rgba(white, 0.5)
-        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)
-
-      @media screen and (prefers-color-scheme: dark)
-        background: rgba(white, 0.05)
-        box-shadow: inset 0 0 32px 1px rgba(white, 0.2)
+      if $leftbar-background-image
+        @media screen and (min-width: $device-mobile-max)
+          background: rgba(white, 0.5)
+          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)
+        @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(--alpha100)
+    background: var(--bg-a100)
     .sidebg
       --inset: 0
       --saturate: 300%
     .leftbar-container:after
-      background: var(--alpha20)
+      background: var(--bg-a20)

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

@@ -1,6 +1,6 @@
 a.tag-plugin.button
   background: var(--theme)
-  color: var(--alpha100)
+  color: var(--bg-a100)
   display: inline-flex
   align-items: baseline
   justify-content: center
@@ -28,7 +28,7 @@ a.tag-plugin.button[size='xs']
     margin: 0 2px
 
 a.tag-plugin.button:hover
-  --theme: $color-hover
+  --theme: var(--accent)
 
 .tag-plugin.grid a.tag-plugin.button
   width: 100%

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

@@ -1,3 +1,39 @@
+chat_light()
+  --chat-bg:     #f1f2f5
+  --chat-block:  #ffffff
+  --chat-border: #f2f2f2
+  --chat-qq-right-bg: #0099FF
+  --chat-qq-right-text: #ffffff
+  --chat-wechat-news-num: #d8dadf
+  --chat-video-button: #ffffffE6
+  --chat-wechat-right-bg: #91ED61
+  --chat-quote-blink-color: #185c6d1a
+  --chat-wechat-quote-color: #808080
+  --chat-wechat-quote-bg: #8080801a
+
+chat_dark()
+  --chat-bg:     #1f2224  // #111111
+  --chat-block:  #25282a  // #191919
+  --chat-border: #303437  // #222222
+  --chat-qq-right-bg: #0099ff80
+  --chat-qq-right-text: #ffffff99
+  --chat-wechat-news-num: #25282a
+  --chat-video-button: #25282ad9  // #191919E6
+  --chat-wechat-right-bg: hsl(hue($c-green), 25, 25)
+  --chat-quote-blink-color: #185c6d26
+  --chat-wechat-quote-color: #858585
+  --chat-wechat-quote-bg: #8585851a
+
+:root[data-theme="light"]
+  chat_light()
+:root[data-theme="dark"]
+  chat_dark()
+:root:not([data-theme])
+  chat_light()
+  @media (prefers-color-scheme: dark)
+    chat_dark()
+
+
 .md-text .tag-plugin.chat
     .fs12
         font-size: $fs-12
@@ -115,10 +151,10 @@
                 height: 100%
             .submit-btn
                 padding: 3px 6px
-                background: var(--theme-color-opa)
+                background: var(--theme-a30)
                 border-radius: 6px
                 font-size: $fs-14
-                color: var(--theme-color)
+                color: var(--theme)
         .icons
             margin: 0 .5em
             display: flex
@@ -168,8 +204,8 @@
                     align-items: center
                     .label
                         padding: 0 4px
-                        color: var(--theme-color)
-                        background: var(--theme-color-opa)
+                        color: var(--theme)
+                        background: var(--theme-a30)
                         border-radius: 3px
                         margin-right: 4px
                         font-size: 'calc(%s - .1rem)' % $fs-12
@@ -192,17 +228,17 @@
                         min-height: 100px
                     >.quote
                         color: var(--text-p3)
-                        background: var(--text-p3-opa)
+                        background: var(--text-a20)
                         padding: .3rem
                         border-radius: 6px
                         cursor: pointer
                         margin-bottom: .3em
                         trans2 color background .5s
                         &:hover
-                            color: var(--theme-color)
-                            background: var(--theme-color-opa)
+                            color: var(--theme)
+                            background: var(--theme-a30)
                             .quote-user>svg>path
-                                fill: var(--theme-color)
+                                fill: var(--theme)
                         .quote-user
                             display: flex
                             justify-content: space-between

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

@@ -26,7 +26,7 @@
     &:before, &:after
       position: absolute
       content: ""
-      background: var(--site-bg)
+      background: var(--background)
     &:before
       left: 1px
       top: 5px

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

@@ -9,11 +9,12 @@
   width: 100%
   min-width: 200px
   span
-    line-height: 3
-    padding: 0 1rem
-    background: var(--block)
-    border-right: 1px solid var(--block-border)
-    color: var(--text-p3)
+    padding: .25rem .5rem
+    margin: auto .5rem
+    line-height: 1
+    border-radius: 4px
+    background: x-theme-alpha(0.2)
+    color: var(--theme)
     font-family: $ff-code
     font-size: $fs-13
     font-weight: 700
@@ -25,14 +26,18 @@
     color: var(--text-p2)
     line-height: 3
     text-indent: 1rem
+  span+input.copy-area
+    text-indent: 0
   button.copy-btn
-    margin: 2px
+    margin: 2px 2px 2px 0
     border-radius: 'calc(%s - 2px)' % $border-bar
     display: inline-block
-    background: none
+    background: var(--block)
+    trans1 all
     line-height: 0
     font-size: 1rem
     padding: 0 .75rem
     color: var(--text-p2)
     &:hover
-      background: var(--block-border)
+      color: var(--theme)
+      background: var(--theme-a20)

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

@@ -24,15 +24,14 @@
       overflow: hidden
       -webkit-line-clamp: 2
       position: relative
+    .lazy-box
+      border-radius: 64px
+      margin: 0 0 0.5rem
     img
       object-fit: cover
       display: block
       width: 48px
       height: 48px
-      background: var(--card)
-      border-radius: 64px
-      margin: 0 0 0.5rem
-
   .label
     margin-top: 4px
     color: white
@@ -43,10 +42,10 @@
 
 // transform
 .users-wrap .user-card .card-link
-  >img
+  .lazy-box
     floatable-trans()
   &:hover
     background: var(--block-border)
-    img
+    .lazy-box
       transform: scale(1.2) rotate(8deg)
       box-shadow: $boxshadow-card-float

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

@@ -58,14 +58,15 @@
       font-weight: 500
       margin-top: 1rem
       max-width: 100%
+    .lazy-box
+      border-radius: 64px
+      floatable-trans()
     img
       object-fit: cover
       display: block
       width: 64px
       height: 64px
-      background: var(--card)
-      border-radius: 64px
-      floatable-trans()
+      
     
   .previews
     display: flex
@@ -117,7 +118,7 @@
         background: var(--block-border)
         trans1 all
       &:hover:before
-        background: $color-hover
+        background: var(--accent)
         // height: calc(100% - 4px)
         height: 100%
         top: 0
@@ -150,11 +151,11 @@
   &:hover
     .desc
       &:before
-        color: $color-hover
+        color: var(--accent)
         transform: scale(1.2) translateX(-4px)
   .card-link:hover
-    img
+    .lazy-box
       transform: scale(1.2) rotate(8deg)
       box-shadow: $boxshadow-card-float
   .post-link:hover
-    color: $color-hover
+    color: var(--accent)

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

@@ -96,8 +96,6 @@
     img  
       width: 100%
       height: 100%
-      &.loading
-        background-size: convert(hexo-config('plugins.lazyload.loading_image.size'))
 
 // 瀑布流布局
 .tag-plugin.gallery.flow-box
@@ -111,6 +109,7 @@
       height: 100%
       border-radius: 8px
     &:has(img.loading),&:has(img.error)
+      background-color: var(--block)
       img
         background-color: var(--block)
   .image-meta

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

@@ -34,7 +34,7 @@
       color: var(--text-p1)
       &:hover
         background: var(--card) !important
-        color: $color-theme
+        color: var(--theme)
   .image-meta
     display: flex
     justify-content: center