hexo-theme-stellar 1.19.0 → 1.21.0

package/source/css/_layout/tag-plugins/common.styl

@@ -13,9 +13,9 @@ set_text_black()
 
 set_dynamic_color($theme)
   --theme: $theme
-  --theme-bg1: hsl(hue($theme), 90, 90)
-  --theme-bg2: hsl(hue($theme), 80, 95)
   --theme-border: hsl(hue($theme), 50, 80)
+  --theme-block: hsl(hue($theme), 90, 92)
+  --theme-codeblock: hsl(hue($theme), 50, 95)
   --text-p0: hsl(hue($theme), 55, 16)
   --text-p1: hsl(hue($theme), 55, 20)
   --text-p2: hsl(hue($theme), 90, 24)
@@ -23,87 +23,81 @@ set_dynamic_color($theme)
 .tag-plugin
   --theme: var(--text-p1)
   --theme-border: var(--block-border)
-  --theme-bg1: hsl(hue($color-theme), 90, 90)
-  --theme-bg2: var(--block)
-  &.tag
-    --text-p2: hsl(hue($color-theme), 90, 24)
+  --theme-block: var(--block)
+  --theme-codeblock: var(--block)
 
-.tag-plugin[color='red']
+.colorful[color='red']
   set_dynamic_color($c-red)
-.tag-plugin[color='orange']
+.colorful[color='orange']
   set_dynamic_color($c-orange)
-.tag-plugin[color='yellow']
+.colorful[color='yellow']
   set_dynamic_color($c-yellow)
-.tag-plugin[color='green']
+.colorful[color='green']
   set_dynamic_color($c-green)
-.tag-plugin[color='cyan']
+.colorful[color='cyan']
   set_dynamic_color($c-cyan)
-.tag-plugin[color='blue']
+.colorful[color='blue']
   set_dynamic_color($c-blue)
-.tag-plugin[color='purple']
+.colorful[color='purple']
   set_dynamic_color($c-purple)
 
-.tag-plugin[color='light']
-  --theme-bg1: hsl(0 0 88%)
-  --theme-bg2: white
+.colorful[color='light']
+  --theme-block: white
   set_text_black()
 
-.tag-plugin[color='dark']
-  --theme-bg1: hsl(0 0 12%)
-  --theme-bg2: #333
+.colorful[color='dark']
+  --theme-block: #333
   set_text_white()
 
-.tag-plugin[color='warning']
+.colorful[color='warning']
   --theme: $c-yellow
   --theme-border: #ffe659
-  --theme-bg2: #ffe659
+  --theme-block: #ffe659
   --theme-link: #ff453a
 
-.tag-plugin[color='error']
+.colorful[color='error']
   --theme: $c-yellow
   --theme-border: #ff453a
-  --theme-bg2: #ff453a
+  --theme-block: #ff453a
   --theme-link: #ffe659
   set_text_white()
 
 set_darkmode_tags()
   set_dynamic_color($theme)
     --theme: $theme
-    --theme-bg1: hsl(hue($theme), 50, 16)
-    --theme-bg2: hsl(hue($theme), 16, 16)
     --theme-border: hsl(hue($theme), 50, 24)
+    --theme-block: hsl(hue($theme), 16, 16)
+    --theme-codeblock: hsl(hue($theme), 12, 18)
     --text-p0: hsl(hue($theme), 100, 85)
     --text-p1: hsl(hue($theme), 50, 75)
     --text-p2: hsl(hue($theme), 80, 72)
   .tag-plugin.tag
     set_dynamic_color($color-theme)
-  .tag-plugin[color='red']
+  .colorful[color='red']
     set_dynamic_color($c-red)
-  .tag-plugin[color='orange']
+  .colorful[color='orange']
     set_dynamic_color($c-orange)
-  .tag-plugin[color='yellow']
+  .colorful[color='yellow']
     set_dynamic_color($c-yellow)
-  .tag-plugin[color='green']
+  .colorful[color='green']
     set_dynamic_color($c-green)
-  .tag-plugin[color='cyan']
+  .colorful[color='cyan']
     set_dynamic_color($c-cyan)
-  .tag-plugin[color='blue']
+  .colorful[color='blue']
     set_dynamic_color($c-blue)
-  .tag-plugin[color='purple']
+  .colorful[color='purple']
     set_dynamic_color($c-purple)
-  .tag-plugin[color='light']
+  .colorful[color='light']
     --theme-border: white
-    --theme-bg1: hsl(0 0 88%)
-    --theme-bg2: #fff
+    --theme-block: #fff
     set_text_black()
 
-  .tag-plugin[color='dark']
+  .colorful[color='dark']
     --theme-border: black
-    --theme-bg1: hsl(0 0 12%)
-    --theme-bg2: #111
+    --theme-block: #111
     set_text_white()
 
-  .tag-plugin[color='warning'],.tag-plugin[color='light']
+  .colorful[color='warning'],.colorful[color='light']
     set_text_black()
 
 if hexo-config('style.darkmode') == 'auto'

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

@@ -3,7 +3,7 @@ details.folding
   padding: 1rem
   margin: 1rem 0
   border-radius: $border-block
-  background: var(--theme-bg2)
+  background: var(--theme-block)
   border: 1px solid var(--theme-border)
   summary
     cursor: pointer

package/source/css/_layout/tag-plugins/frame.styl

@@ -27,7 +27,7 @@
       margin-top: 19px
       margin-bottom: 20px
     .frame
-      background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.4/frame/iphone11.svg);
+      background-image: url(https://gcore.jsdelivr.net/gh/cdn-x/placeholder@1.0.9/frame/iphone11.svg);
       width: 329px
       height: 658px
   &[focus='top']

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

@@ -0,0 +1,46 @@
+.tag-plugin.gallery
+  border-radius: 8px
+  column-count: 4
+  column-gap: 0
+  margin-left: -4px
+  margin-right: -4px
+  .cell
+    display: block
+    padding: 4px
+    overflow hidden
+    z-index 0
+    position: relative
+    &:hover
+      .image-meta
+        background: rgba(black, 0.5)
+      .image-caption
+        color: white
+  img 
+    object-fit: cover
+    max-height: 100%
+    overflow: hidden
+    display: block
+  .image-meta
+    position: absolute
+    z-index: 1
+    margin: 4px
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    pointer-events: none
+    background: transparent
+    border-radius: 8px
+    trans1(background)
+    display: flex
+    flex-direction: column
+    justify-content: flex-end
+    .image-caption
+      display: block
+      font-size: $fs-13
+      color: transparent
+      line-height: 1.2
+      margin: 4px
+      trans1(color)
+      &:empty
+        display: none

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

@@ -3,7 +3,6 @@
   grid-gap: 16px
   grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 16px)
   >.cell
-    margin: 1rem 0
     p:first-child>strong:only-child
       font-size: 1rem
   >.cell>
@@ -18,14 +17,6 @@
     p:last-child
       margin-bottom: -0.25em
 
-.md-text .tag-plugin.grid
-  margin-top: -0.5rem
-  margin-bottom: -0.5rem 
-
-.tag-plugin.grid
-  @media screen and (max-width: $device-tablet)
-    display: block
-
 .tag-plugin.grid
   &[bg]>.cell
     padding: 1rem

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

@@ -0,0 +1,17 @@
+.md-text .tag-plugin.hashtag
+  padding: 0px 8px
+  border-radius: 100px
+  background: var(--theme-block)
+  color: var(--text-p2)
+  margin: 2px 0
+  display: inline-flex
+  align-items: center
+  font-size: $fs-13
+  font-weight: 500
+  trans2 background color
+  span  
+    margin: 0 2px
+  &:hover
+    background: var(--text-p2)
+    color: var(--theme-block)
+  

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

@@ -1,8 +1,5 @@
 .md-text .tag-plugin.mark
-  padding: 0 1px
+  padding: 1px 2px
   border-radius: 2px
-  background: var(--theme-bg2)
-  border: 1px solid var(--theme-border)
+  background: var(--theme-block)
   color: var(--text-p0)
-  &[color=dark]
-    border-color: var(--theme-bg2)

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

@@ -2,7 +2,7 @@
   position: relative
   padding: 0.25rem 1rem
   border-radius: $border-block
-  background: var(--theme-bg2)
+  background: var(--theme-block)
   overflow: hidden
   if hexo-config('tag_plugins.note.border') == true
     border: 1px solid var(--theme-border)
@@ -31,6 +31,7 @@
     background: var(--block-hover)
 .md-text .tag-plugin.note[child=codeblock]
   padding: 0
+  background: var(--theme-codeblock)
   >.title, >.body:only-child
     margin-top: 0
   >.body

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

@@ -0,0 +1,106 @@
+.md-text .tag-plugin.okr
+  position: relative
+  border-radius: $border-block
+  background: var(--theme-block)
+  border: 1px solid var(--theme-border)
+  if hexo-config('tag_plugins.okr.border') == true
+    border: 1px solid var(--theme-border)
+  overflow: hidden
+  color: var(--text-p1)
+  line-height: 1.5
+  .o
+    .title
+      font-size: $fs-15
+    .note
+      font-size: $fs-14
+      p
+        font-size: $fs-14
+  .kr
+    .title
+      font-size: $fs-14
+    .note
+      font-size: $fs-14
+      p,li,.tag-plugin
+        font-size: $fs-14
+
+  .title
+    font-weight: 600
+    display: block
+  .note
+    font-weight: 400
+    display: block
+    margin-top: 0.5rem
+    >p,>ul
+      margin-top: 0.25rem
+      margin-bottom: 0.25rem
+    >.tag-plugin
+      margin-top: 0.25rem
+      margin-bottom: 0.25rem
+    >*:last-child
+      margin-bottom: 0
+  .status 
+    font-size: $fs-12
+    padding: 2px 4px
+    border-radius: 2px
+  .okr-item.o
+    border-bottom: 4px solid var(--theme-border)
+  .okr-item.kr+.okr-item.kr
+    border-top: 1px dashed var(--theme-border)
+  
+
+.tag-plugin.okr .okr-item
+  display: grid
+  grid-template-columns: 3.2rem auto 100px
+  grid-column-gap: 0.75rem
+  padding: 1rem
+  .okr-left .title
+    background: var(--card)
+    border-radius: 1rem
+    text-align: center
+    padding: 0 0.5rem
+  .labels
+    display: flex
+    justify-content: space-between
+    align-items: flex-start
+    position relative
+    .label
+      background: var(--theme-block)
+      color: var(--text-p1)
+
+  .progress
+    margin-top: 4px
+    height: 4px
+    border-radius: 2px
+    position: relative
+    background: var(--card)
+    .fill
+      position: absolute
+      background: var(--theme)
+      border-radius: 2px
+      top: 0
+      left: 0
+      bottom: 0
+      &:before
+        content: ''
+        position absolute
+        top: -4px
+        bottom: -4px
+        right: -4px
+        width: 8px
+        height: 12px
+        border-radius: 8px
+        background: white
+        box-shadow: $boxshadow-button
+      &:after
+        content: ''
+        position absolute
+        top: -2px
+        bottom: -2px
+        right: -2px
+        width: 4px
+        height: 8px
+        border-radius: 4px
+        background: var(--theme)
+        
+
+  

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

@@ -206,4 +206,17 @@
   h5,h6
     font-size: $fs-15
     margin: 0.5rem 0
-    line-height: 1.2
+    line-height: 1.2
+
+.tag-plugin.timeline.stellar-memos-api .body
+  p:first-child 
+    margin-top: 2px
+  p:last-child
+    margin-bottom: 2px
+  img  
+    margin: 0
+    max-height: 128px
+  .tag-plugin.image
+    display: flex
+    .image-bg+.image-bg
+      margin-left: 4px

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

@@ -8,7 +8,7 @@
   padding: 1rem
   box-shadow: $boxshadow-card
 
-.widget-wrapper.ghuser 
+.widgets .widget-wrapper.ghuser 
   .avatar
     display: block
     border-radius: 100%
@@ -20,15 +20,14 @@
     @media screen and (max-width: $device-tablet)
       max-width: 50%
 
-  .username
+  p.username
     font-weight: 900
     font-size: $fs-h2
     color: var(--text-p0)
-    margin: 0.5rem 0
-
-  .bio
+    margin: 0
+  p.bio
     font-size: $fs-13
-    margin: 0.5rem 0
+    margin: 0
 
   .follow 
     font-weight: 500

package/source/css/_plugins/copycode.styl

@@ -8,15 +8,22 @@
   padding: 4px 0.5rem
   opacity: 0
   font-weight: 700
-  color: var(--theme)
+  color: var(--text-p2)
+  border-bottom-left-radius: $border-bar
+  border-bottom-right-radius: $border-bar
+  background: var(--block-hover)
+  display: block
   cursor: pointer
+  margin-right: 0.5rem
 
-.highlight:hover .copy-btn 
-  opacity 0.25
+.highlight:hover
+  .code:before
+    opacity: 0
+  .copy-btn 
+    opacity: 0.75
 
 .highlight .code .copy-btn:hover
-  color: var(--theme)
-  opacity: 0.75
+  opacity: 1
 
 .highlight .code .copy-btn.success
   color: $c-green
@@ -24,4 +31,8 @@
 
 .highlight .code .copy-btn.warning
   color: $c-orange
-  opacity: 0.75
+  opacity: 0.75
+
+.md-text .tag-plugin[child=codeblock]
+  .highlight .code .copy-btn
+    border-radius: $border-bar

package/source/css/_plugins/fancybox.styl

@@ -3,3 +3,7 @@ img[fancybox='true']
 
 .swiper-slide
   cursor: zoom-in
+
+.tag-plugin.gallery
+  img 
+    cursor: zoom-in

package/source/css/_plugins/index.styl

@@ -13,6 +13,8 @@ if hexo-config('plugins.mermaid.enable')
   @import 'mermaid'
 if hexo-config('plugins.copycode.enable')
   @import 'copycode'
+if hexo-config('plugins.tianli_gpt.enable')
+  @import 'tianli_gpt'
 
 
 // 评论

package/source/css/_plugins/mermaid.styl

@@ -1,10 +1,125 @@
-pre.mermaid {
-  display: inline-block;
-  width: 100%;
-  text-align: center;
-}
-
-.mermaid svg {
-  width: 100%;
-  display: inline-block;
-}
+pre.mermaid
+  display: inline-block
+  width: 100%
+  text-align: center
+  font-family: $ff-body
+
+.mermaid svg 
+  width: 100%
+  display: inline-block
+
+
+.mermaid svg
+  width: 100%
+  display: inline-block
+
+.mermaid span,text
+  font-family: $ff-body
+
+.mermaid .edgeLabel
+  padding: 4px
+  background-color: var(--site-bg) !important
+
+.mermaid rect.basic.label-container
+  stroke: var(--block-border) !important
+  fill: var(--block) !important
+  
+set_mermaid_darkmode()
+  .mermaid 
+    fill: #ccc !important
+  
+
+  .mermaid .error-icon 
+    fill: #a44141 !important
+  
+
+  .mermaid .error-text 
+    fill: #ddd !important
+    stroke: #ddd !important
+  
+
+  .mermaid .marker 
+    fill: lightgrey !important
+    stroke: lightgrey !important
+  
+
+  .mermaid .marker.cross 
+    stroke: lightgrey !important
+  
+
+  .mermaid .label 
+    color: #ccc !important
+  
+
+  .mermaid .cluster-label text 
+    fill: #F9FFFE !important
+  
+
+  .mermaid .cluster-label span 
+    color: #F9FFFE !important
+  
+
+  .mermaid .label text,
+  .mermaid span 
+    fill: #ccc !important
+    color: #ccc !important
+  
+
+  .mermaid .node rect,
+  .mermaid .node circle,
+  .mermaid .node ellipse,
+  .mermaid .node polygon,
+  .mermaid .node path 
+    fill: #1f2020 !important
+    stroke: #81B1DB !important
+  
+
+  .mermaid .arrowheadPath 
+    fill: lightgrey !important
+  
+
+  .mermaid .edgePath .path 
+    stroke: lightgrey !important
+  
+
+  .mermaid .flowchart-link 
+    stroke: lightgrey !important
+  
+
+  .mermaid .edgeLabel 
+    background-color: hsl(0, 0%, 34.4117647059%) !important
+  
+
+  .mermaid .edgeLabel rect 
+    background-color: hsl(0, 0%, 34.4117647059%) !important
+    fill: hsl(0, 0%, 34.4117647059%) !important
+  
+
+  .mermaid .cluster rect 
+    fill: hsl(180, 1.5873015873%, 28.3529411765%) !important
+    stroke: rgba(255, 255, 255, 0.25) !important
+  
+
+  .mermaid .cluster text 
+    fill: #F9FFFE !important
+  
+
+  .mermaid .cluster span 
+    color: #F9FFFE !important
+  
+
+  .mermaid div.mermaidTooltip 
+    background: hsl(20, 1.5873015873%, 12.3529411765%) !important
+    border: 1px solid rgba(255, 255, 255, 0.25) !important
+  
+
+  .mermaid .flowchartTitleText 
+    fill: #ccc
+  
+
+if hexo-config('style.darkmode') == 'auto'
+  @media (prefers-color-scheme: dark)
+    set_mermaid_darkmode()
+
+if hexo-config('style.darkmode') == 'always'
+  set_mermaid_darkmode()

package/source/css/{_layout/partial/ai_abstract.styl → _plugins/tianli_gpt.styl}

@@ -1,4 +1,4 @@
-:root
+.post-TianliGPT
   --heo-none: #00000000
   --heo-theme = var(--theme-link)
   --heo-main: var(--theme-link)
@@ -7,7 +7,7 @@
   --heo-background: var(--site-bg)
   --heo-hovertext: var(--text-code)
   --heo-secondtext: var(--text-p0)
-  --heo-scrollbar: rgba(60, 60, 67, 0.4)
+  --heo-scrollbar: var(--block-border)
   --heo-secondbg: var(--block)
   --heo-card-bg: var(--block)
   --heo-card-bg-none: rgba(255, 255, 255, 0)

package/source/js/main.js

@@ -126,7 +126,7 @@ const init = {
               highlightItem.addClass("active")
               const e0 = document.querySelector('.widgets')
               const e1 = document.querySelector('#data-toc a.toc-link[href="' + encodeURI(link) + '"]')
-              const offsetBottom = e1.getBoundingClientRect().bottom - e0.getBoundingClientRect().bottom + 100
+              const offsetBottom = e1.getBoundingClientRect().bottom - e0.getBoundingClientRect().bottom + 200
               const offsetTop = e1.getBoundingClientRect().top - e0.getBoundingClientRect().top - 64
               if (offsetTop < 0) {
                 e0.scrollBy(0, offsetTop)
@@ -245,7 +245,7 @@ if (stellar.plugins.stellar) {
       if (els != undefined && els.length > 0) {
         stellar.jQuery(() => {
           stellar.loadScript(js, { defer: true });
-          if (key == 'timeline') {
+          if (key == 'timeline' || 'memos') {
             stellar.loadScript(stellar.plugins.marked);
           }
         })
@@ -299,13 +299,35 @@ if (stellar.plugins.preload) {
   }
 }
 
+function loadFancybox() {
+  stellar.loadCSS(stellar.plugins.fancybox.css);
+  stellar.loadScript(stellar.plugins.fancybox.js, { defer: true }).then(function () {
+    Fancybox.bind(selector, {
+      groupAll: true,
+      hideScrollbar: false,
+      Thumbs: {
+        autoStart: false,
+      },
+      caption: function (fancybox, carousel, slide) {
+        return slide.$trigger.alt || null
+      }
+    });
+  })
+}
 // fancybox
 if (stellar.plugins.fancybox) {
   let selector = 'img[fancybox]:not(.error)';
   if (stellar.plugins.fancybox.selector) {
     selector += `, ${stellar.plugins.fancybox.selector}`
   }
-  if (document.querySelectorAll(selector).length !== 0) {
+  var needFancybox = document.querySelectorAll(selector).length !== 0;
+  if (!needFancybox) {
+    const els = document.getElementsByClassName('stellar-memos-api');
+    if (els != undefined && els.length > 0) {
+      needFancybox = true;
+    }
+  }
+  if (needFancybox) {
     stellar.loadCSS(stellar.plugins.fancybox.css);
     stellar.loadScript(stellar.plugins.fancybox.js, { defer: true }).then(function () {
       Fancybox.bind(selector, {