hexo-theme-stellar 1.32.0 → 1.32.2

package/source/css/_defines/theme_base.styl

@@ -0,0 +1,105 @@
+// 通用 hsla 函数
+x-hsla(h = var(--hue), s = var(--sat), l = var(--light), a = var(--alpha))
+  return unquote('hsla(%s %s %s / %s)' % (h s l a))
+
+// 设置不同透明度的主题色
+x-theme-alpha(a = 1)
+  return unquote('hsla(%s %s %s / %s)' % (var(--hue) var(--sat) var(--light) a))
+
+// 设置基础主题色
+x-set-theme-with-color($color)
+  --hue: hue($color)
+  --sat: saturation($color)
+  --light: lightness($color)
+  --alpha: alpha($color)
+  --theme: x-theme-alpha(1)
+  --theme-a20: x-theme-alpha(0.2)
+  --theme-a30: x-theme-alpha(0.3)
+
+// 设置链接颜色
+x-set-link-with-color($color)
+  $hue = hue($color)
+  $sat = saturation($color)
+  $light = lightness($color)
+  --link: x-hsla($hue, $sat, $light, 1)
+  --link-a20: x-hsla($hue, $sat, $light, 0.2)
+
+// 设置背景色
+x-set-bg-colors($scheme)
+  $hue = $c-base-hue
+  $sat = 0%
+  $light = $scheme == 'dark' ? 0% : 100%
+  --bg-a20: x-hsla($hue, $sat, $light, 0.2)
+  --bg-a50: x-hsla($hue, $sat, $light, 0.5)
+  --bg-a60: x-hsla($hue, $sat, $light, 0.6)
+  --bg-a75: x-hsla($hue, $sat, $light, 0.75)
+  --bg-a100: x-hsla($hue, $sat, $light, 1)
+
+// 设置文本及相关色
+x-set-text-colors($scheme, $p0 = 1, $p1 = 0.8, $p2 = 0.7, $p3 = 0.5, $p4 = 0.4)
+  $hue = $c-base-hue
+  $sat = 0%
+  $light = $scheme == 'dark' ? 100% : 0%
+  
+  --text: x-hsla($hue, $sat, $light, $p0)
+  --text-reverse: x-hsla($hue, $sat, $scheme == 'dark' ? 0% : 100%, $p0)
+  --text-p1: x-hsla($hue, $sat, $light, $p1)
+  --text-p2: x-hsla($hue, $sat, $light, $p2)
+  --text-p3: x-hsla($hue, $sat, $light, $p3)
+  --text-p4: x-hsla($hue, $sat, $light, $p4)
+
+  --text-meta: x-hsla($hue, $sat, $light, 0.2)
+  --text-code: x-hsla($hue, $sat, $light, 0.9)
+
+  --text-a10: x-hsla($hue, $sat, $light, 0.1)
+  --text-a20: x-hsla($hue, $sat, $light, 0.2)
+
+  $sat = $scheme == 'dark' ? 24% : 50%
+  $light = $scheme == 'dark' ? 72% : 12%
+  $alpha = $scheme == 'dark' ? 0.08 : 0.04
+  --block: x-hsla($hue, $sat, $light, $alpha)
+  --block-border: x-hsla($hue, $sat, $light, $alpha * 1.5)
+
+
+// ---------------- apply theme ----------------
+// 设置浅色模式
+dynamic-theme-light()
+  $hue = $c-base-hue
+  --background: x-hsla($hue, 20%, 98%, 1)
+  --card: $site-background ? hsla(white, 0.5) : white
+
+  x-set-bg-colors('light')
+  x-set-text-colors('light')
+
+// 设置深色模式
+dynamic-theme-dark()
+  $hue = $c-base-hue
+  --background: x-hsla($hue, 8%, 12%, 1)
+  @media screen and (max-width: $device-mobile-max)
+    --background: black
+  --card: $site-background ? hsla(white, 0.25) : x-hsla($hue, 10%, 24%, 1)
+
+  x-set-bg-colors('dark')
+  x-set-text-colors('dark')
+  --text-code: x-hsla(20, 75, 60, 1)
+
+
+:root
+  // 主题色
+  x-set-theme-with-color($c-theme)
+  // 强调色
+  --accent: $c-accent
+  // 链接
+  x-set-link-with-color(hsl(207deg, 90%, 54%))
+
+  // dynamic colors
+  dynamic-theme-light()
+  @media (prefers-color-scheme: dark)
+    dynamic-theme-dark()
+
+
+:root[data-theme="light"]
+  dynamic-theme-light()
+:root[data-theme="dark"]
+  dynamic-theme-dark()
+

package/source/css/_defines/theme_colorful.styl

@@ -0,0 +1,117 @@
+// 多彩扩展（文字、链接、边框等都变成彩色）
+x-set-theme-colorful($scheme = 'light', $color, $text = true)
+  $hue = hue($color)
+  x-set-theme-with-color($color)
+  x-set-link-with-color($color)
+  if $scheme == 'dark'
+    --theme-border: x-hsla($hue, 50%, 24%)
+    --theme-block: x-hsla($hue, 24%, 24%)
+    --theme-mark: x-hsla($hue, 24%, 24%)
+    --theme-codeblock: x-hsla($hue, 12%, 18%)
+    if text
+      --text: x-hsla($hue, 50%, 75%, 1)
+      --text-p1: x-hsla($hue, 50%, 75%, 0.8)
+      --text-p2: x-hsla($hue, 80%, 80%, 0.7)
+      --text-p3: x-hsla($hue, 80%, 80%, 0.5)
+      --text-p4: x-hsla($hue, 80%, 80%, 0.4)
+      --link: x-hsla($hue, 80%, 60%, 1)
+      --link-a20: x-hsla($hue, 80%, 60%, 0.2)
+  else
+    --theme-border: x-hsla($hue, 50%, 80%)
+    --theme-block: x-hsla($hue, 90%, 92%)
+    --theme-mark: x-hsla($hue, 95%, 80%)
+    --theme-codeblock: x-hsla($hue, 50%, 95%)
+    if text
+      --text: x-hsla($hue, 55%, 16%, 1)
+      --text-p1: x-hsla($hue, 55%, 16%, 0.8)
+      --text-p2: x-hsla($hue, 90%, 20%, 0.7)
+      --text-p3: x-hsla($hue, 90%, 20%, 0.5)
+      --text-p4: x-hsla($hue, 90%, 20%, 0.4)
+      --link: x-hsla($hue, 95%, 32%, 1)
+      --link-a20: x-hsla($hue, 95%, 32%, 0.2)
+
+.tag-plugin
+  --theme-border: var(--block-border)
+  --theme-block: var(--block)
+  --theme-mark: var(--block)
+  --theme-codeblock: var(--block)
+
+.colorful[color='red']
+  x-set-theme-colorful('light', $c-red)
+.colorful[color='orange']
+  x-set-theme-colorful('light', $c-orange)
+.colorful[color='amber']
+  x-set-theme-colorful('light', $c-amber)
+.colorful[color='yellow']
+  x-set-theme-colorful('light', $c-yellow)
+.colorful[color='green']
+  x-set-theme-colorful('light', $c-green)
+.colorful[color='cyan']
+  x-set-theme-colorful('light', $c-cyan)
+.colorful[color='blue']
+  x-set-theme-colorful('light', $c-blue)
+.colorful[color='purple']
+  x-set-theme-colorful('light', $c-purple)
+.colorful[color='theme']
+  x-set-theme-colorful('light', $c-theme)
+.colorful[color='accent']
+  x-set-theme-colorful('light', $c-accent)
+
+.colorful[color='light']
+  --theme: white
+  --theme-block: var(--theme)
+  --theme-mark: var(--theme)
+  --theme-codeblock: var(--theme)
+  dynamic-theme-light()
+
+.colorful[color='dark']
+  dynamic-theme-dark()
+  --theme: #111
+  --theme-border: none
+  --theme-block: var(--theme)
+  --theme-mark: var(--theme)
+  --theme-codeblock: var(--theme)
+
+.colorful[color='warning']
+  x-set-theme-colorful('light', $c-yellow, false)
+  dynamic-theme-light()
+  x-set-link-with-color($c-red)
+  --theme-border: none
+  --theme-block: var(--theme)
+  --text-code: var(--text-p1)
+
+.colorful[color='error']
+  x-set-theme-colorful('dark', $c-red, false)
+  dynamic-theme-dark()
+  x-set-link-with-color($c-yellow)
+  --theme-border: none
+  --theme-block: var(--theme)
+  --text-code: var(--text-p1)
+
+_dark_tags()
+  .tag-plugin.tag
+    x-set-theme-colorful('dark', $c-theme)
+  .colorful[color='red']
+    x-set-theme-colorful('dark', $c-red)
+  .colorful[color='orange']
+    x-set-theme-colorful('dark', $c-orange)
+  .colorful[color='amber']
+    x-set-theme-colorful('dark', $c-amber)
+  .colorful[color='yellow']
+    x-set-theme-colorful('dark', $c-yellow)
+  .colorful[color='green']
+    x-set-theme-colorful('dark', $c-green)
+  .colorful[color='cyan']
+    x-set-theme-colorful('dark', $c-cyan)
+  .colorful[color='blue']
+    x-set-theme-colorful('dark', $c-blue)
+  .colorful[color='purple']
+    x-set-theme-colorful('dark', $c-purple)
+
+
+:root[data-theme="dark"]
+  _dark_tags()
+:root:not([data-theme])
+  @media (prefers-color-scheme: dark)
+    _dark_tags()
+

package/source/css/_plugins/comments/artalk.styl

@@ -7,11 +7,17 @@
     .atk-header,.atk-editor-user-wrap
       border-bottom: 1px dashed var(--block-border)
       padding: 0.5rem 1rem
+      margin: 0
     .atk-editor-user-wrap:empty
       visibility: hidden
       padding: 0
     >.atk-bottom 
       padding: 8px
+      .atk-state-btn
+        height: 2rem
+        border-radius: 100px
+        .atk-cancel
+          background: none
       .atk-plug-btn
         border-radius: 32px
         height: 2rem
@@ -22,7 +28,7 @@
         min-width: 5em
         trans1 all
         &:hover
-          --at-color-main: $color-hover
+          --at-color-main: var(--accent)
         &:empty
           display: none
   .atk-list-comments-wrap>.atk-comment-wrap
@@ -71,20 +77,31 @@
     --at-color-sub: var(--text-p3)
     --at-color-grey: var(--text-p4)
     --at-color-meta: var(--text-p4)
-    --at-color-border: var(--block-border)
-    --at-color-light: var(--theme-link)
+    if $site-background
+      --at-color-border: transparent
+    else
+      --at-color-border: var(--block-border)
+    --at-color-light: var(--link)
     --at-color-bg: var(--card)
-    --at-color-bg-transl: var(--block-border)
+    --at-color-bg-transl: var(--card)
     --at-color-bg-grey: var(--block)
-    --at-color-bg-grey-transl: orange
-    --at-color-bg-light: rgba(29, 161, 242, 1)
-    --at-color-main: $color-theme
+    --at-color-bg-grey-transl: var(--block-border)
+    --at-color-bg-light: var(--theme)
+    --at-color-main: var(--theme)
     --at-color-red: $c-red
     --at-color-green: $c-green
     --at-color-gradient: linear-gradient(180deg, transparent, var(--card), 50%, var(--card))
 
 .md-text .atk-comment>.atk-main>.atk-body
   overflow: visible
+.md-text .artalk pre code, .atk-layer-wrap pre code
+  background: none
+.md-text .atk-main-editor>.atk-textarea-wrap>.atk-textarea
+  background: none
+
+.md-text .atk-notify-wrap .atk-notify
+  border-radius: $border-bar
+  margin: 8px
 
 
 // override
@@ -113,4 +130,4 @@
     p
       color: var(--text-p3)
   .atk-content a
-    --at-color-main: var(--theme-link)
+    --at-color-main: var(--link)

package/source/css/_plugins/comments/twikoo.styl

@@ -1,5 +1,5 @@
 .cmt-body.twikoo
-  --twikoo-theme: $color-theme
+  --twikoo-theme: var(--theme)
   margin-top: 1.5rem
 
   .tk-content
@@ -38,15 +38,15 @@
   .el-button:not(.el-button--primary):not(.el-button--text):focus,
   .el-button:not(.el-button--primary):not(.el-button--text):hover
     color: var(--twikoo-theme) !important
-    border-color: var(--theme-link-opa) !important
+    border-color: var(--link-a20) !important
     background-color: var(--block) !important
   .el-button--primary.is-disabled:active,
   .el-button--primary.is-disabled:focus,
   .el-button--primary.is-disabled:hover
-    background-color: var(--theme-link-opa) !important
+    background-color: var(--link-a20) !important
 
   .el-button:focus,.el-button:hover
-    border-color: var(--theme-link-opa)
+    border-color: var(--link-a20)
   .el-button:active
     color: var(--twikoo-theme)
     border-color: var(--twikoo-theme)
@@ -58,8 +58,8 @@
     background-color: var(--twikoo-theme)
     border-color: var(--twikoo-theme) !important
   .el-button--primary:focus,.el-button--primary:hover
-    background: $color-hover
-    border-color: $color-hover !important
+    background: var(--accent)
+    border-color: var(--accent) !important
   .el-button--primary:active
     background: var(--twikoo-theme)
     border-color: var(--twikoo-theme)
@@ -70,11 +70,11 @@
   .el-button--primary.is-disabled:active,
   .el-button--primary.is-disabled:focus,
   .el-button--primary.is-disabled:hover
-    background-color: var(--theme-link-opa) !important
-    border-color: var(--theme-link-opa) !important
+    background-color: var(--link-a20) !important
+    border-color: var(--link-a20) !important
   .el-button--primary.is-plain
     color: var(--twikoo-theme) !important
-    border-color: var(--theme-link-opa)
+    border-color: var(--link-a20)
   .el-button--primary.is-plain:focus,
   .el-button--primary.is-plain:hover
     background: var(--twikoo-theme) !important
@@ -111,7 +111,7 @@
     border: none
     padding: 6px 2rem
     border-radius: $border-card
-    background: var(--block-border)
+    background: var(--block)
     color: var(--text-p1)
     line-height: 2
     font-size: 14px
@@ -146,7 +146,7 @@
 
   .tk-tag-green
     border: none
-    background-color: var(--theme-link-opa)
+    background-color: var(--link-a20)
     color: var(--twikoo-theme)
     
   .tk-comments-title .tk-comments-count

package/source/css/_plugins/comments/waline.styl

@@ -9,8 +9,8 @@
   --waline-light-grey: #999;
   --waline-dark-grey: #666;
   /* 主题色 */
-  --waline-theme-color: $color-theme;
-  --waline-active-color: $color-hover;
+  --waline-theme-color: var(--theme);
+  --waline-active-color: var(--accent);
   /* 布局颜色 */
   --waline-color: #444;
   --waline-bgcolor: #fff;

package/source/css/_plugins/index.styl

@@ -1,8 +1,7 @@
+@import 'lazyload'
 @import 'aplayer'
 
 // 根据主题配置加载
-if hexo-config('plugins.lazyload.enable')
-  @import 'lazyload'
 if hexo-config('plugins.swiper.enable')
   @import 'swiper'
 if hexo-config('plugins.scrollreveal.enable')

package/source/css/_plugins/lazyload.styl

@@ -1,63 +1,53 @@
 $lazyTransitionType = hexo-config('plugins.lazyload.transition')
-$loadingImage = hexo-config('plugins.lazyload.loading_image.src')
-$loadingImageSize = convert(hexo-config('plugins.lazyload.loading_image.size'))
-
-img.lazy
+$loadingImageSize = 2rem
+
+.lazy-box
+  position: relative
+  overflow: hidden
+  &.async // 通过 data-service 异步创建的懒加载元素，没办法知道宽高
+    background: var(--block)
+    min-height: 4rem
+
+// 懒加载
+img[data-ll-status]
+  z-index: 1
   &:not(.loaded)
     opacity: 0
   &.loaded,&.error
     opacity: 1
   if $lazyTransitionType == 'blur'
-    trans1 all 0.75s
+    trans1 all 0.5s
     &:not(.loaded)
-      filter blur(50px)
-      -webkit-filter blur(50px)
+      filter blur(20px)
+      -webkit-filter blur(20px)
     &.loaded,&.error
       filter none
       -webkit-filter none
   else
     trans1 all 0.38s
 
-
-@keyframes fadeIn
-  from { opacity: 0; }
-  to { opacity: 1; }
-
-@keyframes blurIn
-  from
-    opacity: 0
-    filter: blur(50px)
-    -webkit-filter: blur(50px)
-  to
-    opacity: 1
-    filter: blur(0px)
-    -webkit-filter: blur(0px)
-
-article img.lazy
-  &:not(.loaded)
-    opacity: 1
-    border-radius: 4px
-    filter none
-    transition: none
-  if $loadingImage
-    &.loading
-      background: url($loadingImage) center center / $loadingImageSize no-repeat
-  else
-    &.loading
-      background: url($loadingIcon) center center / $loadingImageSize no-repeat
-      min-width: $loadingImageSize
-      min-height: $loadingImageSize
-
-  &.loaded
-    animation: fadeIn 0.38s ease-out
-    if $loadingImage
-      background: none
-  if $lazyTransitionType == 'blur'
-    &.loaded
-      animation: blurIn .75s ease-out
-
-  &.error
-    background: none
-    min-width: $loadingImageSize
-    min-height: $loadingImageSize
-
+// 加载占位动画
+img[data-ll-status]+.lazy-icon
+  position: absolute
+  width: $loadingImageSize
+  height: $loadingImageSize
+  max-width: 100%
+  max-height: 100%
+  top: 50%
+  left: 50%
+  transform: translateX(-50%) translateY(-50%)
+  background-size: contain
+  background-repeat: no-repeat
+  background-position: center
+
+// 加载完成
+img[data-ll-status].loaded
+  &+.lazy-icon
+    display: none
+
+// 加载失败
+img[data-ll-status].error
+  min-width: $loadingImageSize
+  min-height: $loadingImageSize
+  &+.lazy-icon
+    display: none

package/source/css/_plugins/mermaid.styl

@@ -9,7 +9,7 @@ pre.mermaid
 
 .mermaid .edgeLabel
   padding: 4px
-  background-color: var(--site-bg) !important
+  background-color: var(--background) !important
 
 .mermaid rect.basic.label-container
   stroke: var(--block-border) !important

package/source/css/_plugins/swiper.styl

@@ -1,5 +1,5 @@
 :root
-  --swiper-theme-color: $color-theme !important
+  --swiper-theme-color: var(--theme) !important
 .swiper
   width: 100%
   border-radius: 4px
@@ -47,7 +47,7 @@ div.swiper-slide
     color: var(--swiper-theme-color)
   &:hover
     background: white !important
-    --swiper-theme-color: $color-hover !important
+    --swiper-theme-color: var(--accent) !important
 
 .swiper-button-prev:after
   transform: translateX(-1px)

package/source/css/_plugins/tianli_gpt.styl

@@ -1,7 +1,7 @@
 :root
   --ai-font-color var(--text-p2)
   --ai-post-bg var(--block)
-  --ai-content-bg var(--site-bg)
+  --ai-content-bg var(--background)
   --ai-content-border 1px solid var(--block-border)
   --ai-border 1px solid var(--block-border)
   --ai-tag-bg var(--card)
@@ -100,7 +100,7 @@
   cursor pointer
 
 #post-ai .ai-btn-item:hover
-  background var(--theme-link)
+  background var(--link)
 
 #post-ai .ai-recommend
   display flex
@@ -112,9 +112,9 @@
   margin-top 2px
 
 #post-ai .ai-recommend-item a
-  border-bottom 2px solid var(--theme-link)
+  border-bottom 2px solid var(--link)
   padding 0 .2em
-  color var(--theme-link)
+  color var(--link)
   font-weight 700
   text-decoration none
   transition all 0.3s
@@ -124,8 +124,8 @@
   -o-transition all 0.3s
 
 #post-ai .ai-recommend-item a:hover
-  background-color var(--theme-link)
-  border-bottom 2px solid var(--theme-link)
+  background-color var(--link)
+  border-bottom 2px solid var(--link)
   color #fff
   border-radius 5px
 
@@ -159,7 +159,7 @@
   opacity 0
 
 #post-ai .ai-Toggle:hover
-  background $color-theme
+  background var(--theme)
 
 #post-ai .ai-speech-box
   width 21px
@@ -193,7 +193,7 @@
   transition .3s
 
 #post-ai .ai-speech-box:hover .ai-speech-content
-  background $color-theme
+  background var(--theme)
 
 @keyframes ai_breathe
   0%

package/source/css/main.styl

@@ -5,7 +5,8 @@
 @import '_custom'
 
 // 含自定义参数的常量以及函数
-@import '_defines/theme'
+@import '_defines/theme_base'
+@import '_defines/theme_colorful'
 @import '_defines/func'
 
 // 通用组件

package/source/js/services/friends.js

@@ -26,6 +26,7 @@ utils.jq(() => {
           cell += `</div>`;
           $(el).find('.grid-box').append(cell);
         }
+        window.wrapLazyloadImages(el);
       });
     }
   });

package/source/js/services/friends_and_posts.js

@@ -52,6 +52,7 @@ utils.jq(() => {
           cell += `</div>`;
           $(el).find('.grid-box').append(cell);
         }
+        window.wrapLazyloadImages(el);
       });
     }
   });

package/source/js/services/sites.js

@@ -36,6 +36,7 @@ utils.jq(() => {
           cell += `</div>`;
           $(el).find('.grid-box').append(cell);
         }
+        window.wrapLazyloadImages(el);
       });
     }
   });

package/source/js/services/timeline.js

@@ -101,6 +101,7 @@ utils.jq(() => {
           cell += '</div>';
           $(el).append(cell);
         });
+        window.wrapLazyloadImages(el);
       });
     }
   });

package/layout/_plugins/lazyload.ejs

@@ -1,21 +0,0 @@
-<script defer src="<%- conf.js %>"></script>
-<script>
-  // https://www.npmjs.com/package/vanilla-lazyload
-  // Set the options globally
-  // to make LazyLoad self-initialize
-  window.lazyLoadOptions = {
-    elements_selector: ".lazy",
-  };
-  // Listen to the initialization event
-  // and get the instance of LazyLoad
-  window.addEventListener(
-    "LazyLoad::Initialized",
-    function (event) {
-      window.lazyLoadInstance = event.detail.instance;
-    },
-    false
-  );
-  document.addEventListener('DOMContentLoaded', function () {
-    window.lazyLoadInstance?.update();
-  });
-</script>