hexo-theme-stellar 1.32.1 → 1.32.2

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

@@ -13,8 +13,8 @@
     margin: auto .5rem
     line-height: 1
     border-radius: 4px
-    background: hsla($color-theme, 0.2)
-    color: $color-theme
+    background: x-theme-alpha(0.2)
+    color: var(--theme)
     font-family: $ff-code
     font-size: $fs-13
     font-weight: 700
@@ -39,4 +39,5 @@
     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

package/source/css/_components/tag-plugins/inline-labels.styl

@@ -1,13 +1,13 @@
 .md-text
   u
     text-decoration: none
-    border-bottom: 2px solid $color-hover
+    border-bottom: 2px solid var(--accent)
   emp
     width: fit-content
     text-decoration: none
-    border-bottom: 4px dotted $color-hover
+    border-bottom: 4px dotted var(--accent)
   wavy
-    text-decoration: underline wavy $color-hover
+    text-decoration: underline wavy var(--accent)
   del
     color: var(--text-p3)
     text-decoration: line-through var(--text-p3)

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

@@ -42,10 +42,9 @@
     padding: 2px 4px
     border-radius: 2px
   .okr-item.o
-    border-bottom: 4px solid var(--theme-border)
+    border-bottom: 4px solid var(--block-border)
   .okr-item.kr+.okr-item.kr
-    border-top: 1px dashed var(--theme-border)
-  
+    border-top: 1px dashed var(--block-border)
 
 .tag-plugin.okr .okr-item
   display: grid

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

@@ -50,4 +50,4 @@
       top: 6px
       bottom: 6px
       border-radius: 4px
-      background: $color-accent
+      background: var(--accent)

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

@@ -31,36 +31,12 @@
     font-size: calc(var(--fsp) + 2px)
     color: var(--text)
 
-// // type=text
-// .md-text .tag-plugin.quot
-//   .content[type=text]
-//     &:before,&:after
-//       content: ""
-//       position: absolute
-//       width: 8px
-//       height: 14px
-//     &:before
-//       top: -8px
-//       left: 0
-//       border-top: 6px solid $color-accent
-//       border-left: 6px solid $color-accent
-//     &:after
-//       right: 0
-//       bottom: -8px
-//       border-right: 6px solid $color-accent
-//       border-bottom: 6px solid $color-accent
-//   h1.content[type=text]
-//     &:before,&:after
-//       width: 12px
-//       height: 20px
-//       border-width: 8px
-
 // type=icon
 .md-text .tag-plugin.quot
   img,svg
     height: 1.5em
     display: inline-block
-    color: $color-accent
+    color: var(--accent)
     border-radius: 0
     flex-shrink: 0
   span.text

package/source/css/_components/tag-plugins/read/paper.styl

@@ -68,7 +68,7 @@
       top: calc(-1rem - 4px)
       right: calc(100% + 1rem - 6px)
       border-radius: 4px
-      background: $color-accent
+      background: var(--accent)
     &:after
       content: ''
       position: absolute
@@ -77,7 +77,7 @@
       top: calc(-1rem - 4px)
       left: calc(100% + 1rem - 6px)
       border-radius: 4px
-      background: $color-accent
+      background: var(--accent)
 
 // 下划线修饰
 .md-text .tag-plugin.paper > .content.underline > .title,

package/source/css/_components/tag-plugins/read/reel.styl

@@ -69,7 +69,7 @@
       top: calc(-1rem - 6px)
       bottom: calc(100% + 1rem - 6px)
       border-radius: 4px
-      background: $color-accent
+      background: var(--accent)
       z-index: 1
     &:after
       content: ''
@@ -79,7 +79,7 @@
       top: calc(100% + 1rem - 6px)
       bottom: calc(-1rem - 6px)
       border-radius: 4px
-      background: $color-accent
+      background: var(--accent)
       z-index: 1
   >.footer
     position: relative
@@ -91,7 +91,7 @@
       top: calc(-1rem - 6px)
       bottom: calc(100% + 1rem - 6px)
       border-radius: 4px
-      background: $color-accent
+      background: var(--accent)
     &:after
       content: ''
       position: absolute
@@ -100,4 +100,4 @@
       top: calc(100% + 1rem - 6px)
       bottom: calc(-1rem - 6px)
       border-radius: 4px
-      background: $color-accent
+      background: var(--accent)

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

@@ -10,24 +10,27 @@
   display: flex
   flex-direction: column
   position: relative
-  >img
-    object-fit: cover
-    aspect-ratio: 1.5
-    width: 100%
-    height: 100%
+  .lazy-box
     border-radius: $border-card-s
     box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
+    overflow hidden
+    >img
+      object-fit: cover
+      aspect-ratio: 1.5
+      width: 100%
+      height: 100%
   .info
     margin-top: 0.5rem
     line-height: 1.2
     position: relative
-    >img
-      width: 28px
-      height: @width
-      border-radius: @width
+    .lazy-box
       float: left
       margin-right: 8px
       margin-top: 2px
+      border-radius: @width
+      >img
+        width: 28px
+        height: @width
     span
       display: block
     .title
@@ -71,11 +74,11 @@
 
 // transform
 .sites-wrap .site-card .card-link
-  >img
+  >.lazy-box
     floatable-trans()
   &:hover
     .labels
       opacity 0
       transform: translateY(-4px)
-    >img
+    >.lazy-box
       floatable-float()

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

@@ -66,7 +66,7 @@
           content: ''
           z-index: 1
           position: absolute
-          background: $color-theme
+          background: var(--theme)
           height: 2px
           bottom: -8px
           left: .75rem

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

@@ -31,14 +31,14 @@
     box-sizing: border-box
     max-width: @max-width
   &[highlight] .header:before
-    background: $color-theme
+    background: var(--theme)
   &+.timenode
     margin-top: 1rem
   &:hover .header
     span
       color: var(--text-p1)
     &:before
-      background: $color-theme
+      background: var(--theme)
       height: 16px
       top: 'calc(50% - 0.5 * %s)' % @height
       transform: scale(1)
@@ -128,7 +128,7 @@
       display: inline-block
       trans1 all
       &:hover
-        color: $color-hover
+        color: var(--accent)
   >p:first-child:not([class])
     font-size: 1rem
     margin: .25rem 0 .5rem
@@ -140,6 +140,12 @@
       margin: 0 auto
   img
     margin: 0.5rem auto
+  .lazy-box
+    margin: .5rem 0
+    border-radius: $border-image
+    >img
+      margin: 0 auto
+
   pre code 
     font-size: $fs-13
 
@@ -173,7 +179,7 @@
     padding: 0 0.5rem
     display: flex 
     align-items: center
-    border-color: $color-link
+    border-color: var(--link)
     &:first-child 
       margin-left: 0
     &:last-child 

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

@@ -13,7 +13,7 @@
   align-items: center
   txt-ellipsis()
   &.active
-    background: var(--alpha50)
+    background: var(--bg-a50)
     svg,img
       filter: unset
 
@@ -24,7 +24,7 @@
   $size = 16px
   padding: 0 2px
   &:not([class='active-icon'])
-    color: $color-theme
+    color: var(--theme)
   max-height: 18px
   width: auto
   filter: grayscale(100%) brightness(0.8) opacity(0.8)
@@ -44,6 +44,6 @@
     padding: 0 8px
 
 .linklist .link:hover
-  background: var(--alpha100)
+  background: var(--bg-a100)
   svg  
     filter: unset

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

@@ -35,8 +35,8 @@
     border-radius: 64px
     margin: 1rem 0 0
     padding: 0.5rem 1rem
-    background: $color-theme
-    color: var(--card)
+    background: var(--theme)
+    color: white
     font-size: 1rem
     align-self: stretch
     text-align: center
@@ -50,7 +50,7 @@
       height: 1.5em
       width: auto
     &:hover
-      background: $color-hover
+      background: var(--accent)
 
   .buttons
     margin: 1rem 0

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

@@ -7,7 +7,7 @@
     color: var(--text-p1)
     trans1 background
     &.active,&:hover
-      background: var(--alpha100)
+      background: var(--bg-a100)
   a+a
     margin-top: 2px
   a  

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

@@ -2,13 +2,19 @@
   .widget-body
     border-radius: $border-card-s
     padding: .25rem 1rem
-    background: var(--alpha50)
+    background: var(--bg-a50)
     >*:first-child
       margin-top: .75rem
 
 .widget-wrapper.markdown .linklist
   margin: 1em 0
   .link
-    background: var(--alpha50)
+    background: var(--bg-a50)
   .link:hover
-    background: var(--alpha100)
+    background: var(--bg-a100)
+
+.l_right .widget-wrapper.markdown .linklist
+  .link
+    background: var(--block)
+  .link:hover
+    background: var(--theme-a20)

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

@@ -5,7 +5,7 @@
     margin-top: 8px
   .item
     line-height: 1.2
-    background: var(--alpha20)
+    background: var(--bg-a20)
     padding: 10px 16px
     border-radius: $border-card-s
     display: block
@@ -33,6 +33,6 @@
   .item
     trans1 background
   .item.active
-    background: var(--alpha50)
+    background: var(--bg-a50)
   .item:hover
-    background: var(--alpha50)
+    background: var(--bg-a50)

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

@@ -1,10 +1,10 @@
 .widget-wrapper.tagcloud .widget-body
   border-radius: $border-card-s
   padding: 12px 16px
-  background: var(--alpha50)
+  background: var(--bg-a50)
   a  
     word-break: break-word
     color: var(--text-p2)
     line-height: 1.5
     &:hover
-      color: $color-hover
+      color: var(--accent)

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

@@ -33,7 +33,7 @@
         padding: 0
         margin: 0
       .highlight, pre:not([class]):has(>code)
-        background: var(--alpha50)
+        background: var(--bg-a50)
       
       
   .tag-plugin.timeline[api] .body .footer
@@ -46,4 +46,4 @@
       content: none
 .l_left .widget-wrapper.timeline .body
   box-shadow: none
-  background: var(--alpha50)
+  background: var(--bg-a50)

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

@@ -1,5 +1,4 @@
 .widget-wrapper.toc
-  background: var(--site-bg)
   z-index 3
   .widget-body
     position relative
@@ -40,7 +39,7 @@
       bottom: 6px
       left: -8px
       width: 4px
-      background: $color-theme
+      background: var(--theme)
       border-radius: 4px
     &:hover
       background: var(--block-border)
@@ -179,6 +178,6 @@
       color: var(--text-p2)
   .widget-wrapper.toc .widget-footer
     a
-      background: var(--alpha100)
+      background: var(--bg-a100)
     a+a
       margin-top: 4px

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

@@ -1,7 +1,7 @@
 .widgets 
   .loading-wrap
     margin: 0.5rem 0
-    background: var(--alpha50)
+    background: var(--bg-a50)
 
 .widgets
   overflow: scroll
@@ -43,11 +43,11 @@
           transform: scale(1.2)
           fill: var(--text-p2)
         &:hover
-          color: $color-hover
-          background: var(--alpha100)
+          color: var(--accent)
+          background: var(--bg-a100)
           opacity 1
           svg
-            fill: $color-hover
+            fill: var(--accent)
 
     .widget-body
       color: var(--text-p1)